STIC:Atelier graphisme, animation, interactivité et HTML5/Video HTML5 simple

De EduTech Wiki
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>
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:Atelier_graphisme,_animation,_interactivité_et_HTML5/Video_HTML5_simple&oldid=44911 »