video on html5

video_on_html5.md

Installing required convertors on mac:

1. HandBrake CLI for H.264/AAC/MP4

http://handbrake.fr/downloads2.php

2. ffmpeg for VP8/Vorbis/WebM

brew install ffmpeg

3. ffmpeg2theora for Theora/Vorbis/Ogg

brew install ffmpeg2theora

Converting the file to all three supported formats to support wide range of browsers and devices:

1. Theora/Vorbis/Ogg

ffmpeg2theora --videobitrate 200 --max_size 320x240 --output pr6.ogv pr6.dv

2. H.264/AAC/MP4

HandBrakeCLI --preset "iPhone & iPod Touch" --vb 200 --width 320 --two-pass --turbo --optimize --input pr6.dv --output pr6.mp4

3. VP8/Vorbis/WebM

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
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

Final HTML markup with fallback to flash:

<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>

video markup elements:

• controls display a built-in set of controls
• preload attribute tells the browser that you would like it to start downloading the video file as soon as the page loads, preload="none" will disable auto-downloading of video file
• autoplay it tells the browser that you would like it to start downloading the video file as soon as the page loads, and you would like it to start playing the video automatically as soon as possible