Deutsch | English | Español | Français |
Italiano | 日本語 | 한국어 | Português |
Pусский | 简体中文 | 繁體中文 |
The video element specifies the video content to be played in a document. For more information on using the video element and object, see video object.
![]() ![]() |
DOM Information
Inheritance Hierarchy
Members
The video object has these types of members:
Events
The video object has these events.
Event | Description |
---|---|
abort |
Fires when the user aborts the download. |
canplay |
Occurs when playback is possible, but would require further buffering. |
canplaythrough |
Occurs when playback to end is possible without requiring a stop for further buffering. |
change |
Fires when the contents of the object or selection have changed. |
drag |
Fires on the source object continuously during a drag operation. |
dragend |
Fires on the source object when the user releases the mouse at the close of a drag operation. |
dragenter |
Fires on the target element when the user drags the object to a valid drop target. |
dragleave |
Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation. |
dragover |
Fires on the target element continuously while the user drags the object over a valid drop target. |
dragstart |
Fires on the source object when the user starts to drag a text selection or selected object. |
drop |
Fires on the target object when the mouse button is released during a drag-and-drop operation. |
durationchange |
Occurs when the duration attribute is updated. |
emptied |
Occurs when the media element is reset to its initial state. |
ended |
Occurs when the end of playback is reached. |
error |
Fires when an error occurs during object loading. |
focus |
Fires when the object receives focus. |
focusin |
Fires for an element just prior to setting focus on that element. |
focusout |
Fires for the current element with focus immediately after moving focus to another element. |
input |
Occurs when the text content of an element is changed through the user interface. |
keydown |
Fires when the user presses a key. |
keypress |
Fires when the user presses an alphanumeric key. |
load |
Fires immediately after the client loads the object. |
loadeddata |
Occurs when media data is loaded at the current playback position. |
loadedmetadata |
Occurs when the duration and dimensions of the media have been determined. |
loadstart |
Occurs when Internet Explorer begins looking for media data. |
mousedown |
Fires when the user clicks the object with either mouse button. |
mousemove |
Fires when the user moves the mouse over the object. |
mouseout |
Fires when the user moves the mouse pointer outside the boundaries of the object. |
mouseover |
Fires when the user moves the mouse pointer into the object. |
mouseup |
Fires when the user releases a mouse button while the mouse is over the object. |
mousewheel |
Fires when the wheel button is rotated. |
onkeyup |
Fires when the user releases a key. |
onMSVideoFormatChanged |
Occurs when the video format changes. |
onMSVideoFrameStepCompleted |
Occurs when the video frame has been stepped forward or backward one frame. |
onMSVideoOptimalLayoutChanged |
Occurs when the msIsLayoutOptimalForPlayback state changes. |
onselect |
Fires when the current selection changes. |
pause |
Occurs when playback is paused. |
play |
Occurs when the play method is requested. |
playing |
Occurs when the audio or video has started playing. |
progress |
Occurs to indicate progress while downloading media data. |
ratechange |
Occurs when the playback rate is increased or decreased. |
ratechange |
Occurs when the playback rate is increased or decreased. |
readystatechange |
Fires when the state of the object has changed. |
reset |
Fires when the user resets a form. |
resize |
Fires when a video element's width or height attributes (or both) are updated. |
seeked |
Occurs when the seek operation ends. |
seeking |
Occurs when the current playback position is moved. |
stalled |
Occurs when the download has stopped. |
suspend |
Occurs if the load operation is intentionally halted. Starting in Microsoft Edge, also occurs if the media network state becomes NETWORK_IDLE. |
timeupdate |
Occurs to indicate the current playback position. |
volumechange |
Occurs when the volume is changed, or playback is muted or unmuted. |
waiting |
Occurs when playback stops because the next frame of a video resource is not available. |
Methods
The video object has these methods.
Method | Description |
---|---|
addTextTrack |
Create a new TextTrack object to add to an HTML5 video. |
canPlayType |
Returns a string that specifies whether the client can play a given media resource type. |
compareDocumentPosition |
Compares the position of two nodes in a document. |
getAttributeNodeNS |
Gets an attribute object that matches the specified namespace and name. |
getAttributeNS |
Gets the value of the specified attribute within the specified namespace. |
getElementsByClassName |
Gets a collection of objects that are based on the value of the class attribute. |
getElementsByTagNameNS |
Gets a collection of objects that are based on the specified element names within a specified namespace. |
getVideoPlaybackQuality |
Returns a VideoPlaybackQuality object from for a given video element. |
hasAttributeNS |
Determines whether an attribute that has the specified namespace and name exists. |
isDefaultNamespace |
Indicates whether or not a namespace is the default namespace for a document. |
isEqualNode |
Determines if two nodes are equal. |
isSameNode |
Determines if two node references refer to the same node. |
isSupported |
Returns a value indicating whether or not the object supports a specific DOM standard. |
load |
Resets the audio or video object and loads a new media resource. |
lookupNamespaceURI |
Gets the URI of the namespace associated with a namespace prefix, if any. |
lookupPrefix |
Gets the namespace prefix associated with a URI, if any. |
msFrameStep |
Steps the video by one frame forward or one frame backward. |
msMatchesSelector |
Determines whether an object matches the specified selector. |
msSetVideoRectangle |
Sets the dimensions of a sub-rectangle within a video. |
pause |
Pauses the current playback and sets paused to TRUE. This can be used to test whether the media is playing or paused. You can also use the pause or play events to tell whether the media is playing or not. |
play |
Loads and starts playback of a media resource. |
removeAttributeNS |
Removes the specified attribute from the object. |
setAttributeNodeNS |
Sets an attribute object as part of the object. |
setAttributeNS |
Sets the value of the specified attribute within the specified namespace. |
Properties
The video object has these properties.
Property | Access type | Description |
---|---|---|
Read-only |
Returns an AudioTrackList object with the audio tracks for a given video element. | |
Use the preload element instead. The autobuffer property was initially listed in the W3C spec, but has been dropped. No version of Internet Explorer supports it. | ||
Gets or sets a value that indicates whether to start playing the media automatically. | ||
Gets a collection of buffered time ranges. | ||
Gets or sets a flag that indicates whether the client provides a set of controls for the media (in case the developer does not include controls for the player). | ||
Gets the address or URL of the current media resource (video, audio) that is selected by IHTMLMediaElement. | ||
Gets or sets the current playback position, in seconds. | ||
Get or sets the current state of the muted attribute. | ||
Gets or sets the default playback rate when the user is not using fast forward or reverse for a video or audio resource. | ||
Returns the duration in seconds of the current media resource. A | ||
Gets information about whether the playback has ended or not. | ||
Returns an object representing the current error state of the audio or video element. | ||
Gets or sets the height of the video element. | ||
Gets the earliest possible position, in seconds, that the playback can begin. The initialTime property was initially listed in the W3C specification, but has been dropped. No new version of Internet Explorer supports it. | ||
Lowers the loading priority of a resource. | ||
Retrieves the local name of the fully qualified XML declaration for a node. | ||
Gets or sets a flag to specify whether playback should restart after it completes. | ||
Gets or sets when the video player control is in boxed ( letterbox or pillarbox) mode. | ||
Gets or sets a flag that indicates whether the audio (either audio or the audio track on video media) is muted. | ||
Retrieves the namespace URI of the fully qualified XML declaration for a node. | ||
Gets the current network activity for the element. | ||
Gets a flag that specifies whether playback is paused. | ||
Gets or sets the current rate of speed for the media resource to play. This speed is expressed as a multiple of the normal speed of the media resource. | ||
Gets TimeRanges for the current media resource that has been played. | ||
Gets or sets a URL of an image to display, for example, like a movie poster. This can be a still frame from the video, or another image if no video data is available. | ||
Retrieves the local name of the fully qualified XML declaration for a node. | ||
Gets or sets a hint to how much buffering is advisable for a media resource, even if autoplay isn't specified. | ||
Read-only | ||
Returns a TimeRanges object that represents the ranges of the current media resource that can be seeked. | ||
Gets a flag that indicates whether the the client is currently moving to a new playback position in the media resource. | ||
The address or URL of the a media resource (video, audio) that is to be considered. | ||
Sets an inline style for the element. | ||
Sets or retrieves the text content of an object and any child objects. | ||
Gets the intrinsic height of a video in CSS pixels, or zero if the dimensions are not known. | ||
Gets the intrinsic width of a video in CSS pixels, or zero if the dimensions are not known. | ||
Gets or sets the volume level for audio portions of the media element. | ||
Gets or sets the width of the video element. |
Standards information
- HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.6
Remarks
Beginning with Windows Internet Explorer 9, any audio or video content needs the correct mime type set on the server, or the files won't play. Internet Explorer 9 supports MP3 audio, and MP4 audio and video. WebM audio and video files can be supported by installing the WebM components from The WebM project. Updates to Microsoft Edge introduced HLS and DASH support. The following table shows the required settings for your web server to host these files correctly.
Media file to serve | Extension setting | Mime type setting |
---|---|---|
Audio mp3 | mp3 | audio/mpeg |
Audio mp4 | m4a | audio/mp4 |
Audio WebM | webm | audio/webm |
Video mp4 | mp4 | video/mp4 |
Video webm | webm | video/webm |
Video HLS | .m3u8 | application/vnd.apple.mpegurl, audio/mpegurl,application/x-mpegurl, or audio/x-mpegURL |
Video DASH | .mpd | application/dash+xml |
The following table shows keyboard shortcuts for controlling the video element.
Key | Action |
---|---|
Space | Toggle play/pause |
M | Mute |
Down | Volume Down |
Up | Volume Up |
Home or Control + Left | Go to the beginning of the file |
Home or Control + Right | Go to the end of the file |
Left | Rewind back 10 seconds |
Right | Skip forward 10 seconds |
Shift + Left | Rewind back 30 seconds |
Shift + Right | Skip forward 30 seconds |
+ | Increase play speed |
- | Decrease play speed |
T | Toggle controls visibility |
K | Skip forward one frame |
J | Rewind back one frame |
U | Show available tracks |
A | Show available subtitles |
Z | Toggle zoom mode |
Alt + Enter | Toggle full screen |
Escape | Exit full screen |
The following extensions are available to the video object when used in a Windows app using JavaScript.
Microsoft Extension | Description |
---|---|
msClearEffects | Clears all effects from the media pipeline. |
msFrameStep | Steps the video by one frame forward or one frame backward. Only available on the video object. |
msInsertAudioEffect | Inserts the specified audio effect into media pipeline. |
msInsertVideoEffect | Inserts the specified video effect into media pipeline. |
msSetMediaProtectionManager | Specifies the media protection manager for a given media pipeline. |
msSetVideoRectangle | Sets the dimensions of a sub-rectangle within a video. Only available on the video object. |
msAudioCategory | Specifies the purpose the audio or video media, such as background audio or alerts. |
msAudioDeviceType | Specifies the output devices that the audio will be sent to. |
msHorizontalMirror | Sets or gets whether a video element is flipped horizontally in the display. Only available on the video object. |
msIsLayoutOptimalForPlayback | Indicates whether the video can be rendered more efficiently. |
msIsStereo3D | Determines whether the system considers the video source that is loaded to be stereo 3-D or not. Only available on the video object. |
msPlayToDisabled | Gets or sets whether the PlayTo device is available. |
msPlayToPrimary | Gets or sets the primary PlayTo device. |
msPlayToSource | Gets the source associated with the media element for use by the PlayToManager. |
msRealTime | Specifies whether or not to enable low-latency playback on the media element. |
msStereo3DPackingMode | Gets or sets the frame-packing mode for stereo 3-D video content. Only available on the video object. |
msStereo3DRenderMode | Gets or sets whether the system display is set to stereo display (if stereo-capable). Only available on the video object. |
msZoom | Gets or sets whether the video frame is trimmed, on the top and bottom or left and right, to fit the video display. Only available on the video object. |
onMSVideoFormatChanged | Occurs when the video format changes. Only available on the video object. |
onMSVideoFrameStepCompleted | Occurs when the video frame has been stepped forward or backward one frame. Only available on the video object. |
For information on video formats supported on the Video tag when used in a Windows app using JavaScript, see Supported audio and video formats.
To prevent the display from be deactivating when user action is no longer detected, such as when an app is playing video, you can call DisplayRequest.RequestActive. To conserve power and battery life, you should call DisplayRequest.RequestRelease to release the display request when it is no longer required. See the Display power state sample for more info.
For an example of audio and video playback in a Windows app using JavaScript, see the HTML media playback sample.
For additional information on creating Windows apps using JavaScript, see Roadmap for Metro Store apps using JavaScript.
For additional information on playing audio and video in a Windows app using JavaScript, see Adding multimedia. For information on audio and video performance, see Audio and video performance.
Examples
This example plays a file called movie.mp4 and displays the built-in controls that are in the HTML5 player. The "not supported" message between the video tags is shown in browsers or modes that don't support HTML5 video.
<html>
<head>
<title>Simple Video Example</title>
</head>
<body>
<video src="movie.mp4" controls >Video tag is not supported</video>
</body>
</html>
See also