Warning:
This wiki has been archived and is now read-only.

Elements/video

From HTML Wiki
Jump to: navigation, search

<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

Event name Dispatched when...
loadstart The user agent begins looking for media data, as part of the resource selection algorithm.
progress The user agent is fetching media data.
suspend The user agent is intentionally not currently fetching media data, but does not have the entire media resource downloaded.
abort The user agent stops fetching the media data before it is completely downloaded, but not due to an error.
error An error occurs while fetching the media data.
emptied A media element whose networkState was previously not in the NETWORK_EMPTY state has just switched to that state (either because of a fatal error during load that's about to be reported, or because the load() method was invoked while the resource selection algorithm was already running).
stalled The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
play Playback has begun. Fired after the play() method has returned, or when the autoplay attribute has caused playback to begin.
pause Playback has been paused. Fired after the pause() method has returned.
loadedmetadata The user agent has just determined the duration and dimensions of the media resource
loadeddata The user agent can render the media data at the current playback position for the first time.
waiting Playback has stopped because the next frame is not available, but the user agent expects that frame to become available in due course.
playing Playback has started.
canplay The user agent can resume playback of the media data, but estimates that if playback were to be started now, the media resource could not be rendered at the current playback rate up to its end without having to stop for further buffering of content.
canplaythrough The user agent estimates that if playback were to be started now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering.
seeking The seeking IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event.
seeked The seeking IDL attribute changed to false.
timeupdate The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously.
ended Playback has stopped because the end of the media resource was reached.
ratechange Either the defaultPlaybackRate or the playbackRate attribute has just been updated.
durationchange The duration attribute has just been updated.
volumechange Either the volume attribute or the muted attribute has changed. Fired after the relevant attribute's setter has returned.

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