<video>

A <video> element is used for playing videos or movies.

HTML Attributes

• autoplay = "autoplay" or "" (empty string) or empty
  Instructs the UA to automatically begin playback of the video as soon as it can do so without stopping.

• preload = "none" or "metadata" or "auto" or "" (empty string) or empty
  Represents a hint to the UA about whether optimistic downloading of the video itself or its metadata is considered worthwhile.
  • "none": Hints to the UA that the user is not expected to need the video, or that minimizing unnecessary traffic is desirable.
  • "metadata": Hints to the UA that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, track list, duration, and so on) is desirable.
  • "auto": Hints to the UA that optimistically downloading the entire video is considered desirable.
    Specifying the empty string is equivalent to specifying the value "auto".

• controls = "controls" or "" (empty string) or empty
  Instructs the UA to expose a user interface for controlling playback of the video.

• loop = "loop" or "" (empty string) or empty
  Instructs the UA to seek back to the start of the video upon reaching the end.

• audio = "muted" or "" (empty string) or empty
  Instructs the UA to default the video to muted.

• poster = URL potentially surrounded by spaces
  The address of an image file for the UA to show while no video data is available.

• height = non-negative integer
  The height of the video, in CSS pixels.

• width = non-negative integer
  The width of the video, in CSS pixels.

• src = URL potentially surrounded by spaces
  The URL for the video.

See also global attributes.

Examples

A video, using the user agent default set of controls, with one source [try it]:

<video controls
  src="http://media.w3.org/2010/05/bunny/movie.ogv">
Your user agent does not support the HTML5 Video element.
</video>

A video, using the user agent default set of controls, with alternative sources [try it]:

<video controls>
 <source src="http://media.w3.org/2010/05/sintel/trailer.mp4"
         type='video/mp4; codecs="avc1, mp4a"'>
 <source src="http://media.w3.org/2010/05/sintel/trailer.ogv"
         type='video/ogg; codecs="theora, vorbis"'>
 <p>Your user agent does not support the HTML5 Video element.</p>
</video>

A video, with its own HTML control [try it]:

<video id="myVideo">
 <source src="http://media.w3.org/2010/05/sintel/trailer.mp4"
         type='video/mp4; codecs="avc1, mp4a"'>
 <source src="http://media.w3.org/2010/05/sintel/trailer.ogv"
         type='video/ogg; codecs="theora, vorbis"'>
 Your user agent does not support the HTML5 Video element.
</video>
<button type="button" onclick="vid_play_pause()">Play/Pause</button>
<script>
function vid_play_pause() {
  var myVideo = document.getElementById("myVideo");
  if (myVideo.paused) {
    myVideo.play();
  } else {
    myVideo.pause();
  }
}
</script>

IDL Attributes and Methods

The following IDL attributes and methods are exposed to dynamic scripts.

           attribute DOMString width;
           attribute DOMString height;
  readonly attribute unsigned long videoWidth;
  readonly attribute unsigned long videoHeight;
           attribute DOMString poster;
           attribute DOMSettableTokenList audio; 

  // error state
  readonly attribute MediaError error;

  // network state
           attribute DOMString src;
  readonly attribute DOMString currentSrc;
  const unsigned short NETWORK_EMPTY = 0;
  const unsigned short NETWORK_IDLE = 1;
  const unsigned short NETWORK_LOADING = 2;
  const unsigned short NETWORK_NO_SOURCE = 3;
  readonly attribute unsigned short networkState;
           attribute DOMString preload;
  readonly attribute TimeRanges buffered;
  void load();
  DOMString canPlayType(in DOMString type);

  // ready state
  const unsigned short HAVE_NOTHING = 0;
  const unsigned short HAVE_METADATA = 1;
  const unsigned short HAVE_CURRENT_DATA = 2;
  const unsigned short HAVE_FUTURE_DATA = 3;
  const unsigned short HAVE_ENOUGH_DATA = 4;
  readonly attribute unsigned short readyState;
  readonly attribute boolean seeking;

  // playback state
           attribute float currentTime;
  readonly attribute float startTime;
  readonly attribute float duration;
  readonly attribute boolean paused;
           attribute float defaultPlaybackRate;
           attribute float playbackRate;
  readonly attribute TimeRanges played;
  readonly attribute TimeRanges seekable;
  readonly attribute boolean ended;
           attribute boolean autoplay;
           attribute boolean loop;
  void play();
  void pause();

  // controls
           attribute boolean controls;
           attribute float volume;
           attribute boolean muted;

Media Events

Accessibility

Authors should ensure that the information and user interface components must be presentable to users in ways they can perceive (WCAG 2.0 - Principle 1: Perceivable). This includes providing alternatives for time-based media Guideline 1.2.

Work in still in progress proper technical support in HTML5.

Formats and Codecs

The HTML5 specification does not require a video codec to be supported by all user agents. Thus, one need to provide alternate sources to ensure proper user experience in the existing user agents. Using Ogg/Theora/Vorbis and MP4/H.264/AAC seems to cover most of the cases out there (if not all). However, Ogg/Theora/Vorbis is being replaced in favor of WebM nowadays. See the wikipedia browser support table.

Streaming

The HTML5 specification does not specify a particular streaming method. It is expected that HTTP 1.1 progressive streaming is at least supported. Adaptive/live streaming may be supported as a UA extension. For an example, see the HTTP Live Streaming Overview from Apple.

Digital Rights Management

The HTML5 specification does not specify a particular digital rights management (DRM) method. It is expected that videos with no DRM are at least supported. DRM may be supported as a UA extension.

HTML reference

This element was introduced in HTML5 - 4.8.6 The video element.

See also

1. HTML5 video
2. Video on the Web
3. Video for Everybody
4. HTML5 Video, Media Events and Media Properties