Monday, March 14, 2011

HTML 5 - Video

My First experience with HTML5, a client came back and said that he cannot see his flash video on iPad, of course, you can't watch flash on ipad, iphone, ipods.. because Apple says that it's buggy and in past has caused lot of Apple system to crash. So what's the solution - HTML 5.

Well, HTML5 is still in development and there is no standard per say and IE has only added support to it in IE9, that too it does not ship the codes, you need to download them. Basically you will need to convert your .swf to .ogg(for FF and Chrome) and .mp4 (for Apple).

Then, add code which allows flash fall back for IE.

Below is the code

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

No comments: