Video

Quick Reference

A quick overview of properties on the video element.

Video element attributes

For the complete list of video element attributes and their definitions, see the video element spec.

Attribute Availability Description
src All browsers Address (URL) of the video.
poster All browsers Address (URL) of an image file that the browser can show as soon as the video element is displayed, without downloading video content.
preload All mobile browsers ignore preload. Hints to the browser that preloading metadata (or some video) in advance of playback is worthwhile. Options are none, metadata, or auto (see Preload section for details).
autoplay Not supported on iPhone or Android; supported on all desktop browsers, iPad, Firefox and Opera for Android. Start download and playback as soon as possible (see Autoplay section).
loop All browsers Loop the video.
controls All browsers Show the default video controls (play, pause, etc.)

Autoplay

On desktop, autoplay tells the browser to immediately start downloading and playing the video as soon as it can. On iOS, and Chrome for Android, autoplay doesn’t work; users must tap the screen to play the video.

Even on platforms where autoplay is possible, you need to consider whether it’s a good idea to enable it:

  • Data usage can be expensive.
  • Causing media to download and playback to begin, without asking first, can unexpectedly hog bandwidth and CPU, and thereby delay page rendering.
  • Users may be in a context where playing video or audio is intrusive.

Autoplay behavior is configurable in the Android WebView via the WebSettings API. It defaults to true but a WebView app can choose to disable it.

Preload

The preload attribute provides a hint to the browser as to how much information or content should be preloaded.

Value Description
none The user may not even watch the video – don't preload anything
metadata Metadata (duration, dimensions, text tracks) should be preloaded, but with minimal video.
auto Downloading the entire video right away is considered desirable.

The preload attribute has different effects on different platforms. For example, Chrome buffers 25 seconds of video on desktop, none on iOS or Android. This means that on mobile, there may be playback startup delays that don’t happen on desktop. See Steve Souders’ test page for full details.

JavaScript

The HTML5 Rocks Video article does a great job of summarizing the JavaScript properties, methods, and events that can be used to control video playback. We’ve included that content here, updating it with mobile-specific concerns where relevant.

Properties

Property Description
currentTime Get or set playback position in seconds.
volume Get or set current volume level for the video.
muted Get or set audio muting.
playbackRate Get or set playback rate; 1 is normal speed forward.
buffered Information about how much of the video has been buffered and is ready to play (see demo).
currentSrc The address of the video being played.
videoWidth Width of the video in pixels (which may be different from the video element width).
videoHeight Height of the video in pixels (which may be different from the video element height).

Neither playbackRate (see demo) nor volume are supported on mobile.

Methods

Method Description
load() Load or reload a video source without initiating playback: for example, when the video src is changed using JavaScript.
play() Play the video from its current location.
pause() Pause the video at its current location.
canPlayType('format') Find out which formats are supported (see Check which formats are supported).

On mobile (apart from Opera on Android) play() and pause() don’t work unless called in response to user action, such as clicking a button: see the demo. (Likewise, playback can’t be initiated for content such as embedded YouTube videos.)

Events

These are only a subset of the media events that may be fired. Refer to the Media events page on the Mozilla Developer Network for a complete listing.

Event Description
canplaythrough Fired when enough data is available that the browser believes it can play the video completely without interruption.
ended Fired when video has finished playing.
error Fired if an error occurs.
playing Fired when video starts playing for the first time, after being paused, or when restarting.
progress Fired periodically to indicate download progress.
waiting Fired when an action is delayed pending completion of another action.
loadedmetadata Fired when browser finishes loading metadata for video: duration, dimensions and text tracks.

Updated on 2014-04-29

Authors

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.