Widely availableThe standard choice for web video when you need native playback features with progressive enhancement.
Media Widely available

<video>

The <video> element embeds video playback in the page. It supports sources, captions, posters, controls, and scriptable media behavior.

MediaVideoPlayback

Overview

The <video> element embeds video playback in the page. It supports sources, captions, posters, controls, and scriptable media behavior.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<video>
3
12
3.5
3.1
18
3
HTML attribute
autoplay
3
12
3.5
3.1
18
10
controls
3
12
3.5
3.1
18
3
crossorigin

The crossorigin attribute, valid on the audio, img, link, script, and video elements, provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. Depending on the element, the attribute can be a CORS settings attribute.
33
≤18
74
10
33
10
height
3
12
3.5
3.1
18
3
loop
3
12
11
3.1
18
6
muted
30
12
11
5
30
4.2
playsinline
75
79
10
75
10
poster
3
12
3.6
3.1
18
3
preload
3
12
4
3.1
18
3
src
3
12
3.5
3.1
18
3
width
3
12
3.5
3.1
18
3
DOM API
HTMLMediaElement

The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video.
3
12
3.5
3.1
18
3
abort_event

The abort event is fired when the resource was not fully loaded, but not as the result of an error.
3
12
9
3.1
18
3
autoplay

The HTMLMediaElement.autoplay property reflects the autoplay HTML attribute, indicating whether playback should automatically begin as soon as enough media is available to do so without interruption.
3
12
3.5
3.1
18
3
buffered

The buffered read-only property of HTMLMediaElement objects returns a new static normalized TimeRanges object that represents the ranges of the media resource, if any, that the user agent has buffered at the moment the buffered property is accessed.
3
12
4
3.1
18
3
canplay_event

The canplay event is fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
3
12
3.5
3.1
18
3
canplaythrough_event

The canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
3
12
3.5
3.1
18
3
canPlayType

The HTMLMediaElement method canPlayType() reports how likely it is that the current browser will be able to play media of a given MIME type.
3
12
3.5
4
18
3
controls

The HTMLMediaElement.controls property reflects the controls HTML attribute, which controls whether user interface controls for playing the media item will be displayed.
3
12
3.5
3.1
18
3
crossOrigin

The HTMLMediaElement.crossOrigin property is the CORS setting for this media element. See CORS settings attributes for details.
33
13
22
10
33
10
currentSrc

The HTMLMediaElement.currentSrc property contains the absolute URL of the chosen media resource. This could happen, for example, if the web server selects a media file based on the resolution of the user's display. The value is an empty string if the networkState property is EMPTY.
3
12
3.5
3.1
18
3
currentTime

The HTMLMediaElement interface's currentTime property specifies the current playback time in seconds.
3
12
3.5
3.1
18
3
defaultMuted

The HTMLMediaElement.defaultMuted property reflects the muted HTML attribute, which indicates whether the media element's audio output should be muted by default. This property has no dynamic effect. To mute and unmute the audio output, use the HTMLMediaElement.muted property.
15
12
11
6
18
6
defaultPlaybackRate

The HTMLMediaElement.defaultPlaybackRate property indicates the default playback rate for the media.
3
12
20
3.1
18
3
duration

The read-only HTMLMediaElement property duration indicates the length of the element's media in seconds.
3
12
3.5
3.1
18
3
durationchange_event

The durationchange event is fired when the duration attribute has been updated.
3
12
3.5
3.1
18
3
emptied_event

The emptied event is fired when the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
3
12
3.5
3.1
18
3
ended

The HTMLMediaElement.ended property indicates whether the media element has ended playback.
3
12
3.5
3.1
18
3
ended_event

The ended event is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.
3
12
3.5
3.1
18
3
error

The HTMLMediaElement.error property is the MediaError object for the most recent error, or null if there has not been an error. When an HTMLMediaElement/error_event event is received by the element, you can determine details about what happened by examining this object.
3
12
3.5
3.1
18
3
error_event

The error event is fired when the resource could not be loaded due to an error (for example, a network connectivity problem).
3
12
6
3.1
18
3
load

The HTMLMediaElement method load() resets the media element to its initial state and begins the process of selecting a media source and loading the media in preparation for playback to begin at the beginning.
3
12
3.5
3.1
18
3
loadeddata_event

The loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.
3
12
3.5
3.1
18
3
loadedmetadata_event

The loadedmetadata event is fired when the metadata has been loaded.
3
12
3.5
3.1
18
3
loadstart_event

The loadstart event is fired when the browser has started to load a resource.
3
12
6
4
18
3
loop

The HTMLMediaElement.loop property reflects the loop HTML attribute, which controls whether the media element should start over when it reaches the end.
3
12
11
4
18
3
muted

The HTMLMediaElement.muted property indicates whether the media element is muted.
3
12
3.5
3.1
18
3
networkState

The HTMLMediaElement.networkState property indicates the current state of the fetching of media over the network.
3
12
3.5
3.1
18
3
pause

The HTMLMediaElement.pause() method will pause playback of the media, if the media is already in a paused state this method will have no effect.
3
12
3.5
3.1
18
3
pause_event

The pause event is sent when a request to pause an activity is handled and the activity has entered its paused state, most commonly after the media has been paused through a call to the element's HTMLMediaElement.pause method.
3
12
3.5
3.1
18
3
paused

The read-only HTMLMediaElement.paused property tells whether the media element is paused.
3
12
3.5
3.1
18
3
play

The HTMLMediaElement play() method attempts to begin playback of the media. It returns a Promise which is resolved when playback has been successfully started.
3
12
3.5
3.1
18
3
play_event

The play event is fired when the paused property is changed from true to false, as a result of the play method, or the autoplay attribute.
3
12
3.5
3.1
18
3
play (returns promise)

Returns a `Promise`
50
17
53
10
50
10
playbackRate

The HTMLMediaElement.playbackRate property sets the rate at which the media is being played back. This is used to implement user controls for fast forward, slow motion, and so forth. The normal playback rate is multiplied by this value to obtain the current rate, so a value of 1.0 indicates normal speed.
3
12
20
3.1
18
3
played

The played read-only property of the HTMLMediaElement interface indicates the time ranges the resource, an audio or video media file, has played. It returns a new TimeRanges object that contains the ranges of the media source that the browser has played, if any, at the time the attribute is evaluated.
3
12
15
3.1
18
3
playing_event

The playing event is fired after playback is first started, and whenever it is restarted. For example it is fired when playback resumes after having been paused or delayed due to lack of data.
3
12
3.5
3.1
18
3
preload

The preload property of the HTMLMediaElement interface is a string that provides a hint to the browser about what the author thinks will lead to the best user experience.
5
12
4
5
18
5
progress_event

The progress event is fired periodically as the browser loads a resource.
3
12
6
3.1
18
3
ratechange_event

The ratechange event is fired when the playback rate has changed.
3
12
3.5
3.1
18
3
readyState

The HTMLMediaElement.readyState property indicates the readiness state of the media.
3
12
3.5
3.1
18
3
seekable

The seekable read-only property of HTMLMediaElement objects returns a new static normalized TimeRanges object that represents the ranges of the media resource, if any, that the user agent is able to seek to at the time seekable property is accessed.
3
12
8
3.1
18
3
seeked_event

The seeked event is fired when a seek operation completed, the current playback position has changed, and the Boolean seeking attribute is changed to false.
3
12
3.5
3.1
18
3
seeking

The seeking read-only property of the HTMLMediaElement interface is a Boolean indicating whether the resource, the audio or video, is in the process of seeking to a new position.
3
12
3.5
3.1
18
3
seeking_event

The seeking event is fired when a seek operation starts, meaning the Boolean seeking attribute has changed to true and the media is seeking a new position.
3
12
3.5
3.1
18
3
src

The HTMLMediaElement.src property reflects the value of the HTML media element's src attribute, which indicates the URL of a media resource to use in the element.
3
12
3.5
3.1
18
3
stalled_event

The stalled event is fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
3
12
3.5
3.1
18
3
suspend_event

The suspend event is fired when the user agent is intentionally not fetching media data, in which case HTMLMediaElement.networkState is set to HTMLMediaElement.NETWORK_IDLE. This can happen if there's no more data to load, or if loading is unnecessary; for example, the browser may decide to only buffer 5 minutes of a video in advance, in which case loading…
3
12
3.5
3.1
18
3
timeupdate_event

The timeupdate event is fired when the time indicated by the currentTime attribute has been updated.
3
12
3.5
3.1
18
3
volume

The HTMLMediaElement.volume property sets the volume at which the media will be played.
3
12
3.5
3.1
18
3
volumechange_event

The volumechange event is fired when either the HTMLMediaElement.volume attribute or the HTMLMediaElement.muted attribute has changed.
3
12
6
3.1
18
3
waiting_event

The waiting event is fired when playback has stopped because of a temporary lack of data.
3
12
6
3.1
18
3
HTMLVideoElement

Implemented by the video element, the HTMLVideoElement interface provides special properties and methods for manipulating video objects. It also inherits properties and methods of HTMLMediaElement and HTMLElement.
3
12
3.5
3.1
18
3
height

The height property of the HTMLVideoElement interface returns an integer that reflects the height attribute of the video element, specifying the displayed height of the resource in CSS pixels.
3
12
3.5
3.1
18
3
playsInline
75
79
10
75
10
poster

The poster property of the HTMLVideoElement interface is a string that reflects the URL for an image to be shown while no video data is available. If the property does not represent a valid URL, no poster frame will be shown.
3
12
3.6
3.1
18
3
resize_event

The resize event of the HTMLVideoElement interface fires when one or both of the HTMLVideoElement.videoWidth and HTMLVideoElement.videoHeight properties have just been updated.
3
79
3.5
3.1
18
3
videoHeight

The HTMLVideoElement interface's read-only videoHeight property indicates the intrinsic height of the video, expressed in CSS pixels. In simple terms, this is the height of the media in its natural size.
3
12
3.5
3.1
18
3
videoWidth

The HTMLVideoElement interface's read-only videoWidth property indicates the intrinsic width of the video, expressed in CSS pixels. In simple terms, this is the width of the media in its natural size.
3
12
3.5
3.1
18
3
width

The width property of the HTMLVideoElement interface returns an integer that reflects the width attribute of the video element, specifying the displayed width of the resource in CSS pixels.
3
12
3.5
3.1
18
3
MediaError

The MediaError interface represents an error which occurred while handling media in an HTML media element based on HTMLMediaElement, such as audio or video.
3
12
4
3.1
18
2
code

The read-only property MediaError.code returns a numeric value which represents the kind of error that occurred on a media element. To get a text string with specific diagnostic information, see MediaError.message.
3
12
3.5
3.1
18
2
message

The read-only property MediaError.message returns a human-readable string offering specific diagnostic details related to the error described by the MediaError object, or an empty string ("") if no diagnostic information can be determined or provided.
59
79
52
15
59
15
TimeRanges

When loading a media resource for use by an audio or video element, the TimeRanges interface is used for representing the time ranges of the media resource that have been buffered, the time ranges that have been played, and the time ranges that are seekable.
6
12
4
3.1
18
2
end

The end() method of the TimeRanges interface returns the time offset (in seconds) at which a specified time range ends.
6
12
4
3.1
18
2
length

The TimeRanges.length read-only property returns the number of ranges in the object.
6
12
4
3.1
18
2
start

The start() method of the TimeRanges interface returns the time offset (in seconds) at which a specified time range begins.
6
12
4
3.1
18
2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (74)
Implementation note
  • With `crossorigin="use-credentials"`, cookies aren't sent during seek. See bug 1532722.
Notes 1 item(s)
Implementation note
  • Previously available under a different name: webkit-playsinline (8)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: webkit-playsinline (8)
Notes 1 item(s)
Implementation note
  • Defaults to `metadata` in Chrome 64.
Notes 1 item(s)
Implementation note
  • Defaults to `metadata` in Chrome Android 64.
Notes 2 item(s)
Implementation note
  • `codecs` string can contain any subset of optional parameters (should be all or none).
  • Errors if `codecs` string contains unexpected characters (should evaluate string up to character).
Notes 2 item(s)
Implementation note
  • `codecs` string can contain any subset of optional parameters (should be all or none).
  • Errors if `codecs` string contains unexpected characters (should evaluate string up to character).
Notes 2 item(s)
Implementation note
  • Before Firefox 28, `canPlayType()` returned `probably` when asked about WebM audio or video files without the `codecs` parameter. Since multiple codecs are supported, this is not enough information to determine if a file can be played, so `maybe` is now correctly returned.
  • Before Firefox 101, `canPlayType()` ignored `codecs` parameter options for `av01` codecs (treating them as `av1`).
Notes 2 item(s)
Implementation note
  • `codecs` string can contain any subset of optional parameters (should be all or none).
  • Errors if `codecs` string contains unexpected characters (should evaluate string up to character).
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (22)
Implementation note
  • Previously available under a different name: crossorigin (12)
Notes 1 item(s)
Removed
  • The `NETWORK_LOADED` state was removed to align with the HTML spec in Firefox 4.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • `volume` returns a value and is writable; however, the value is always 1, and setting a value has no effect on the volume of the media object.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • The `onresize` event handler property is not supported.
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (4)
Implementation note
  • Previously available under a different name: HTMLMediaError (3.5)

Syntax

HTML 
<video controls width="640" poster="thumbnail.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="ja" label="日本語">
  Your browser does not support the video element.
</video>

Live demo

videopre-ya-

playUI display. with Video element in videocontent embed.controls.

PreviewFullscreen

Poster Attribute and Sizespecified

aspekt settings. with samuneil specified.width / height. with poster

PreviewFullscreen

video Attributeoverview

Video element in usablemain attribute. and.

PreviewFullscreen

Use cases

  • Instructional media

    Deliver tutorials, demonstrations, or promotional clips directly in the page.

  • Rich content blocks

    Combine video with text, chapters, or transcripts inside articles and product pages.

Cautions

  • Heavy video assets need compression, loading strategy, and poster handling to avoid hurting performance.
  • Custom playback interfaces are significantly more complex than native controls.

Accessibility

  • Provide captions, transcripts, and controls that remain usable by keyboard and assistive technology.

Related links

Powered by web-features