Geeks With Blogs

News

Steve Albers

HTML5 supports a standard, native <video> tag which is already well supported in browsers and has great backwards-compatibility options. 

Before you spend too much time on the HTML5 video element, you should spend some time getting comfortable with video codecs and debate going on regarding video codec support between the different browsers.  Dive Into HTML5 has a great introduction to the topic, and these Information Week and Register articles can help catch you up on the current state of video as part of the future open web standard.

This example shows how the video tag takes advantage of a standard HTML behavior to provide compatibility to older browsers and new browsers that require different video file types:

  • A browser will ignore tags it does not recognize.  So older browsers will bypass the <video> and <source> tags.  If the browser can support a Flash plugin (in the <object> tag) it will pull the youtube video.  If that isn’t supported, it falls through to the “downloadMovie” div that shows a message, static image and a download link.
  • For new browsers, the system will fall through inner <source> tags until it finds a value it supports.  This means it will stop at the mp4 for IE 9 and Chrome browsers, webm for new Firefox browsers and ogv for Firefox 3.6.  For more information on these codecs search on “ogv”, “webm” and “h.264” on www.caniuse.com
<video id="animalVideo" width=600 height=600 controls>
	<source src="/video/MVI3.mp4"  />
	<source src="/video/MVI5.webm"   />
	<source src="/video/MVI4.ogv"   />
	<object width="600" height="600" type="application/x-shockwave-flash"
		data="http://www.youtube.com/v/OUcvO4MiWek">
		<param name="movie" value="http://www.youtube.com/v/OUcvO4MiWek />
	<div id="downloadMovie"><img src="/video/Manatees.jpg" alt="Manatees"/>
	<br>
	<a href="/video/MVI3.mp4" alt="Download video">Download the video as \MP4</a>
	</div>
	</object>
</video>
Posted on Tuesday, March 27, 2012 9:42 PM HTML5 | Back to top


Comments on this post: Using HTML5 Today part 5– using video today

# re: Using HTML5 Today part 5– using video today
Requesting Gravatar...
Three rounds of dried tofu were stringed on the bamboo sticks, bamboo sticks on the

container in Men Air Max 2015 the gurgling

boiled, braved the fragrance, you are difficult to turn a blind eye, both do not smell.
Left by solo on Sep 05, 2017 4:30 AM

Your comment:
 (will show your gravatar)


Copyright © Steve Albers | Powered by: GeeksWithBlogs.net