Video

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.