Posts tagged video

7

Mar

video in HTML5 – quick tips

Posted by François Patte | Frameworks |

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

1

Mar

Once upon a time in the web

Posted by François Patte | Frameworks |

As everybody know (unless you’ve been on an island lost in the jungle), HTML5 is THE subject of this year.

Inside this huge release, comes a tag. A tag that many people already nicknamed”the Flash killer”. A simple tag in appearance but harsh in his integration. This tag is called the<video> tag (read this with enio morricone’s song in mind).

For now, Flash player reigns over the web for years. He has won the battle versus quicktime, media player, realplayer(yeah it’s been a while that you haven’t heard of it).

BUT with the rise of the Apple machines, comes Iphone and Ipad. They don’t recognise Flash player as the king. So, our video tag arrives and here we are now: (more…)

,