Realny przykład użycia elementu video

W rozdziale:

Kompletny realny przykład

W tej części przedstawiam realny przykład zastosowania opisanych technik. Wzbogaciłem kod Wideo dla każdego o film w formacie WebM. Jeden plik źródłowy wideo zakodowałem w trzech formatach przy użyciu następujących poleceń:

## Theora/Vorbis/Ogg
you@localhost$ ffmpeg2theora --videobitrate 200 --max_size 320x240 --output pr6.ogv pr6.dv
## H.264/AAC/MP4
you@localhost$ HandBrakeCLI --preset "iPhone & iPod Touch" --vb 200 --width 320 --two-pass --turbo --optimize --input pr6.dv --output pr6.mp4
## VP8/Vorbis/WebM
you@localhost$ ffmpeg -pass 1 -passlogfile pr6.dv -threads 16  -keyint_min 0 -g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 204800 -s 320x240 -aspect 4:3 -an -f webm -y NUL
you@localhost$ ffmpeg -pass 2 -passlogfile pr6.dv -threads 16  -keyint_min 0 -g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 204800 -s 320x240 -aspect 4:3 -acodec libvorbis -ac 2 -y pr6.webm

W kodzie „HTML” znajduje się element <video> HTML5, zagnieżdżony w nim element <object> stanowiący awaryjne wyjście oparte na Flashu oraz niewielki skrypt dla urządzeń z Androidem:

<video id="movie" width="320" height="240" preload controls>
  <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis" />
  <source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis" />
  <source src="pr6.mp4" />
  <object width="320" height="240" type="application/x-shockwave-flash"
    data="flowplayer-3.2.1.swf">
    <param name="movie" value="flowplayer-3.2.1.swf" />
    <param name="allowfullscreen" value="true" />
    <param name="flashvars" value="config={'clip': {'url': 'http://wearehugh.com/dih5/pr6.mp4', 'autoPlay':false, 'autoBuffering':true}}" />
    <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p>
  </object>
</video>
<script>
  var v = document.getElementById("movie");
  v.onclick = function() {
    if (v.paused) {
      v.play();
    } else {
      v.pause();
    }
  };
</script>

Dzięki takiej kombinacji HTML5 i Flasha twój film powinno dać się obejrzeć w prawie każdej przeglądarce na prawie każdym urządzeniu: