Following my previous post (Once upon a time in the web) and a pre-sales work for Belgacom, here’s some quick tips to know when implementing video tags in html5:

  1. you have min. 2 video formats – one in MP4 with H.264 codec and one in OGG with Theora codec
  2. you need a callback in Flash for older browser (and as if  they don’t have flash, provide links to download the video) example: http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html

    3. On my side, i used a js flash player like this:

    <script type="text/javascript">
var flashvars = { skin:'flash/belgacom.swf' , screenshot:'default.jpg', flv:'video.mp4', autoplay:'0' };
var params = {quality:'high', menu:'true', allowFullScreen:'true', scale:'noscale', allowScriptAccess:'always', swLiveConnect:'true',wmode:'transparent'};
swfobject.embedSWF("flash/player.swf?timestamp=1029626341", "flvplayer", "512", "288", "9.0.0", 0, flashvars, params);
</script>
<div id="flvplayer"><a href="video.mp4">Download this Video Demo</a></div>

    included directly in video tag after source element (it works very well as it creates a valid object element)

  3. attribute (discover all in w3schools):
    • width and height actually do resize the width and height of the video but beware to the weight because our mate of “MS” will catch you if you don’t keep it light-weight
    • background color is supported -> bg=”colorwhite”.
    • controls available : Play - Pause - Seeking - Volume - Fullscreen toggle* - Captions/Subtitles (when available) -Audio track (when available) * fullscreen is not yet implemented by any browser (except safari), you must use js and make a “fake” fullscreen
  4. Firefox and Safari block video on v.o. with credentials.
  5. Video tag also support .mov format but directly in it (not as a source like mp4, ogg or webm)