<video> Tag Examples

Examples of the video tag in HTML 5
<video> tag with poster, video controls and separate pause / play button
(see <video> tag demo above)
<p>Slow motion video of particles being impacted by a solid sphere</p>
<video poster="/media/deep-impact-movie.png" controls="controls" style="border: black 1px solid; margin: 4px">
   <source src="/media/deep-impact-movie.ogg" type="video/ogg; codecs=&quot;theora,vorbis&quot;"/>
   <source src="/media/deep-impact-movie.mp4" type="video/mp4; codecs=&quot;avc1.42E01E,mp4a.40.2&quot;"/>
</video>
<form>
   <input type="button" value="&#x25b6;" onclick="
      var video = document.getElementsByTagName('video')[0];
      if (video.paused) { video.play(); this.value=&quot;&#x2016;&quot; }
      else { video.pause(); this.value=&quot;&#x25b6;&quot; }
      return false;
   "/>
</form>
<p>500 fps high speed video from NASA JPL</p>

In actual practice, you probably would use either the video controls or the pause / play button, not both.

Example of embedding video in HTML 5

When embedding video from another site, such as YouTube, in an HTML 5 page the <object> tag is typically used rather than the <video> tag:

<object width="1280" height="745">
   <param name="movie" value="http://www.YouTube.com/v/ZXYVyrrUZ3c&hl=en_US&fs=1&rel=0&hd=1"/>
   <param name="allowFullScreen" value="true"/>
   <param name="allowscriptaccess" value="always"/>
   <embed src="http://www.YouTube.com/v/ZXYVyrrUZ3c&hl=en_US&fs=1&rel=0&hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="745"/>
</object>

Demo of embedding a YouTube video:
embedded YouTube video
So far the WebKit browsers, such as Safari and Chrome do support HTML 5 video. If your current browser does not yet support HTML 5 video it should play the flash video instead.

HTML 5 video with fallback

The <video> tag can be combined with the <object> tag to provide for video with fallback. The fallback element(s) are coded within the <video> tag as shown in this example:

<video poster="poster.png" controls="controls" style="border: black 1px solid; margin: 4px">
   <source src="http://Vyd.com/video.ogv" type="video/ogg; codecs="theora,vorbis""/>
   <source src="http://Vyd.com/video.mp4" type="video/mp4; codecs="avc1.42E01E,mp4a.40.2""/>
<object width="1280" height="745" type="video/webm">
      <param name="movie" value="http://www.YouTube.com/v/ZXYVyrrUZ3c&hl=en_US&fs=1&rel=0&hd=1"/>
      <param name="allowFullScreen" value="true"/>
      <param name="allowscriptaccess" value="always"/>
      <embed src="http://www.YouTube.com/v/ZXYVyrrUZ3c&hl=en_US&fs=1&rel=0&hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="745"/>
   </object>
</video>