HTML 5 Video

Code for Embedding video

Youtube or Vimeo:

Use the share button for youtube or vimeo files and choose embed. Copy the code to your page.

HTML 5 video tag with 1 source:

<video src="derrick_final_comp1.mp4" width="600" height="250" preload></video>

HTML 5 video tag with multiple sources:

<video width="600" height="250" controls autoplay>
<!--iphone format first so it won't ignore the code-->
<source src="derrick_final_comp1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="derrick_final_comp1.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="derrick_final_comp1.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
<!--fallback in case the users browser sucks-->
<p>Your browser does not support html5 video</p>
</video>

The codecs attributes and values might not be absolutely necessary.
Again, iphone is first and fallback text is last. Fallback files can also be flash video.

<video width="600" height="250" controls autoplay>
<source src="derrick_final_comp1.mp4" type="video/mp4">
<source src="derrick_final_comp1.webm" type="video/webm">
<source src="derrick_final_comp1.theora.ogv" type="video/ogg">
<p>Your browser does not support html5 video</p>
</video>

See these sites for html5 video help

• http://en.wikipedia.org/wiki/HTML5_video This one shows current format support.
• http://diveintohtml5.info/video.html
• http://camendesign.com/code/video_for_everybody
• http://html5video.org/
• http://videojs.com/
• http://www.webmproject.org/ - page about the webm codec

To encode video:

• Miro video converter was used to convert the video to the different formats
• http://www.firefoggs.org - to encode ogg theora for free
• http://handbrake.fr/ - to encode h.264 video ( and rip DVD's)
  • Video with tips for handrake settings for h.264 video
• Sorenson Squeeze- A more full featured solution for video deployment
• Also check out coincident.tv for interactive web video.