STIC:Atelier graphisme, animation, interactivité et HTML5/Video HTML5 simple
Aller à la navigation
Aller à la recherche
http://tecfa.unige.ch/guides/html/html5-video/html5-video-simple.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>HTML 5 video element</title>
</head>
<body>
<h1>The HTML5 video element</h1>
<p>This is an example file for an HTML5 Video tutorial: <a href="http://edutechwiki.unige.ch/en/HTML5_audio_and_video">http://edutechwiki.unige.ch/en/HTML5_audio_and_video</a></p>
<p>Look at the source if you don't want to read the EduTechWiki article ...</p>
<h1>1. Most simple use</h1>
<p>In this section we first will display different video formats. That way you can test your browser. We finally show how to define alternatives. </p>
<h2>Ogg</h2>
<video src="videos/state-of-wikipedia-480x272.ogv" controls preload="metadata">
Sorry, your browser doesn't support HTML5 video
</video>
<p>This example wouldn't work in a browser like IE9 that doesn't support Ogg</p>
<h2>mp4</h2>
<video src="videos/state-of-wikipedia-480x272.mp4" controls preload="metadata">
Sorry, your browser doesn't support HTML5 video
</video>
<p>This example wouldn't work in a browser like Firfox that doesn't support mp4</p>
<h2>Webm</h2>
<video src="videos/state-of-wikipedia-480x272.webm" controls preload="metadata">
Sorry, your browser doesn't support HTML5 video
</video>
<p>This example wouldn't work in a browser like IE9 that doesn't support webm</p>
<h1>2. Defining alternatives</h1>
<video id="movie1" controls="controls" preload="metadata">
<source src="videos/state-of-wikipedia-480x272.mp4"/>
<source src="videos/state-of-wikipedia-480x272.ogv"/>
<source src="videos/state-of-wikipedia-480x272.webm"/>
Your browser doesn't support HTML5. Maybe you should upgrade.
</video>
<p>This example should work in most current modern web browsers, since it defines the three most popular alternatives. However, defining a container format may not be enough, since each container may include different codecs. I.e. there are quality variants for mp4 and its better ones may not display in certain browsers/devices.</p>
<h1>3. Defining alternatives with codec information</h1>
<video id="movie2" controls="controls" preload="metadata">
<source src="videos/state-of-wikipedia-480x272.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
<source src="videos/state-of-wikipedia-480x272.ogv"
type='video/ogg; codecs="theora, vorbis"' />
<source src="videos/state-of-wikipedia-480x272.webm"
type='video/webm; codecs="vp8, vorbis"' />
<p>The video is available as <a href="videos/state-of-wikipedia-480x272.mp4">H.264 in an MP4 container</a>, or as <a href="videos/state-of-wikipedia-480x272.ogv">VP8 in a
Ogg container</a>or as <a href="videos/state-of-wikipedia-480x272.webm">VP8 in a
WebM container</a>. </p>
<p>Inspiration of the example code: <a href="http://www.w3.org/2010/Talks/1014-html5-video-fd/video-html5.pdf">Towards Video on the Web with HTML5</a></p>
</video>
<hr/>
<a href="http://validator.w3.org/check?uri=referer">W3C validator</a>
</body>
</html>