HTML5 video

Alt Text

Update 24 Aug 2011

Firstly let me say that adding video should be very easy and it is. The problem I have come up against is getting the video to work on all devices. I first tried to use the html5 video tag with a flash fall back and this works great except for Chrome, when I put in the tag preload=”none”. Chrome did not like this for some reason, this would not be a big problem if I had only one video on a page but on my “Tutorial” page I have 9 videos. I do not want 9 videos downloading content as soon as you load the page. Also Chrome does not have a full screen option in the controls. Safari would say “loading” when it was waiting for the user to click play. I’m sure that all these issues will not bother some people and thats fine and I’m sure that (well I hope) the video tag will get better over time. I used the file .fla for the flash file instead of .mov or mp4 as the second two formats did not seem to stream the video, so you had to wait until the whole .mov file had downloaded before the video started to play. All this leads me to why I chose to go with Flash with a HTML5 Video fall back. Flash using the longtailvideo player looks and behaves the same across all browsers that have flash installed. If you don’t have flash installed then you get the HTML5 Video. If you do not have ether you are not going to see any video!! Both Flash and HTML5 Video shrink to fit the device too. Anyway I hope that clears up why I have updated this page 3 times so far. Please let me know your thoughts in the comments section. Below is the code that I used. I’m no video expert but I tested the videos on my site on:
Mac: Safari, firefox, chrome PC: ie7, 8, 9, firefox (with out flash), chrome

These sites also came up with the same conclusion:
adactio.com
catharsis.tumblr.com

I used the FLASH FIRST example

<? ---- HTML5 FIRST---- ?>

<video preload="none" controls="controls" poster="___***___.jpg" width="__*width*__" height="__*height*__">
<source src="___***___.mp4" type="video/mp4" />
<source src="___***___.webm" type="video/webm" />
<source src="___***___.ogv" type="video/ogg" />

<object type="application/x-shockwave-flash" data="player.swf" width="__*width*__" height="__*height*__">
<param name="bgcolor" value="#F9F9F9">
<param name='allowfullscreen' value='true'>
<param name="movie" value="player.swf" />
<param name="flashvars" value="controlbar=over&amp;image=___***___.jpg&amp;file=___***___.flv" />
<img src="___***___.jpg" alt="picture" width="__*width*__" height="__*height*__" />
</object>
</video>

<? ---- FLASH FIRST---- ?>

<object type="application/x-shockwave-flash" data="player.swf" width="__*width*__" height="__*height*__">
<param name="bgcolor" value="#F9F9F9">
<param name='allowfullscreen' value='true'>
<param name="movie" value="player.swf" />
<param name="flashvars" value="controlbar=over&amp;image=___***___.jpg&amp;file=___***___.flv" />

<video preload="none" controls="controls" poster="___***___.jpg" width="__*width*__" height="__*height*__">
<source src="___***___.mp4" type="video/mp4" />
<source src="___***___.webm" type="video/webm" />
<source src="___***___.ogv" type="video/ogg" />
</video>

</object>

Here is the code that I’m using for putting HTML5 video’s on websites. It has a flash fallback for older browsers, IE8 and below. It works for ipad & iphone too

I’m using the Long Tail Video Player.swf

Update 19 Aug 2011

To encode the movies I'm using mirovideoconverter.com

The main codec that I will be using are video.mp4 video.webm I will use this one too but I think video.webm will replace it in the future. video.ogv

To encode the movies I'm using firefogg for the .ogg & .webm For the .mp4 I'm using imovie (mac only) - export movie using quick time - video format: H.264 (you can then use this for the flash fall back instead of encoding another movie in .flv)

I belive the best size for viewing video on the iphone is width=”480″ height=”320″

The iPhone can play MOV and MPEG4 videos with a maximum size of 640×480

For the poster image I’m using an image 480px x 264px (I have found that you have to compensate on the ratio for the controls at the bottom of the movie especially in flash but as usual it depends on the browser!) it’s still a bit out but will do for now.

HTML5 Video

The Code

<video width="480" height="320" controls preload="none" poster="video.jpg">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
<object width="480" height="320" type="application/x-shockwave-flash" data="player.swf">
<param name="movie" value="player.swf" />
<param name="flashvars" value="image=video.jpg&amp;file=video.mp4" />
<param name="scale" value="noscale" />
<param name="wmode" value="transparent" />
</object>
</video>

Flash Fallback

iphone

Note: The image show on the iphone is the last frame of the video and not the poster image

iphone video

Useful links

http://camendesign.com/code/video_for_everybody http://diveintohtml5.org/video.html

One thought on “HTML5 video