HTML <video> Tag How To

<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: