video object

Specifies the video content to be played in a document.

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.6

DOM Information

Inheritance Hierarchy

Node

Element

HTMLElement

HTMLMediaElement

video

Members

The video object has these types of members:

Events
Methods
Properties

Events

The video object has these events.

Event	Description
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.
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.
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.
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.
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.
getVideoPlaybackQuality	Returns a VideoPlaybackQuality object from for a given video element.
load	Resets the audio or video object and loads a new media resource.
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.

Properties

The video object has these properties.

Property	Access type	Description
autobuffer		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.
autoplay		Gets or sets a value that indicates whether to start playing the media automatically.
buffered		Gets a collection of buffered time ranges.
controls		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).
currentSrc		Gets the address or URL of the current media resource (video,audio) that is selected by IHTMLMediaElement.
currentTime		Gets or sets the current playback position, in seconds.
defaultMuted		Get or sets the current state of the muted attribute.
defaultPlaybackRate		Gets or sets the default playback rate when the user is not using fast forward or reverse for a video or audio resource.
duration		Returns the duration in seconds of the current media resource. A `NaN` value is returned if duration is not available, or `Infinity` if the media resource is streaming.
ended		Gets information about whether the playback has ended or not.
error		Returns an object representing the current error state of the audio or video element.
height		Gets or sets the height of the video element.
initialTime		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.
loop		Gets or sets a flag to specify whether playback should restart after it completes.
msIsBoxed		Gets or sets when the video player control is in boxed ( letterbox or pillarbox) mode.
msKeys	Read-only	Deprecated. Gets the MSMediaKeys object, which is used for decrypting media data, that is associated with this media element.
muted		Gets or sets a flag that indicates whether the audio (either audio or the audio track on video media) is muted.
networkState		Gets the current network activity for the element.
paused		Gets a flag that specifies whether playback is paused.
playbackRate		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.
played		Gets TimeRanges for the current media resource that has been played.
poster		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.
preload		Gets or sets a hint to how much buffering is advisable for a media resource, even if autoplay isn't specified.
readyState (media, audio, video)	Read-only	Gets the current state of an audio or video resource.
seekable		Returns a TimeRanges object that represents the ranges of the current media resource that can be seeked.
seeking		Gets a flag that indicates whether the the client is currently moving to a new playback position in the media resource.
src		The address or URL of the a media resource (video, audio) that is to be considered.
textTracks	Read-only	Returns a list of TextTrack objects from a video object.
videoHeight		Gets the intrinsic height of a video in CSS pixels, or zero if the dimensions are not known.
videoWidth		Gets the intrinsic width of a video in CSS pixels, or zero if the dimensions are not known.
volume		Gets or sets the volume level for audio portions of the media element.
width		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

Note If you are developing locally or on an intranet and have rendering issues for HTML5, you can add a "meta http-equiv-'X-UA-Compatible' content= " meta command, followed by "IE=edge" to the <head> block of a webpage to force Internet Explorer to use the latest standards. For more information about document compatibility, see Defining Document Compatibility.

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

When you use an HLS (HTTP Live Streaming) format file, the src URL is a Playlist file rather than an individual video file. The extension m3u8 denotes a .m3u file encoded with UTF-8. Internet Explorer 11 internally handles downloading and playing the video and audio segments. For more info on HLS file formats, see the HTTP Live Streaming specification.

The following extensions are available to the Video object when used in a Windows Store 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.
onMSVideoOptimalLayoutChanged	Occurs when the msIsLayoutOptimalForPlayback state changes.

For information on video formats supported on the Video tag when used in a Windows Store 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 Store app using JavaScript, see the HTML media playback sample.

For additional information on creating Windows Store apps using JavaScript, see Roadmap for Windows Store apps using JavaScript.

For additional information on playing audio and video in a Windows Store app using JavaScript, see Adding multimedia. For information on audio and video performance, see Audio and video performance.

Examples

This example shows how to play a video by using HTML5.

Using one of the following formats, type the name of an MP4-format video file into the text box:

Local file syntax: "file://C:\yourfilepath.mp4"
Web file syntax: "http://webfilepath.mp4"

HTML


<html>
  <head>
    <title>Simple Video Example</title>
     <script type="text/javascript">
         function playVideo() {
             var oInput = document.getElementById('videoFile');   //text box
             var oVideo = document.getElementById('video1');      //video element
             oVideo.src = oInput.value;
             oVideo.play();
         }

         function pauseVideo() {
             var oVideo = document.getElementById('video1');
             oVideo.pause();
         }         
     </script>
</head>
<body>
<video id="video1" >HTML5 video is not supported</video>
<br />
<!-- Preload a video into the text field -->
<input type="text" id="videoFile" style="width:600px" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4"/>
<button onclick="playVideo();">Play</button> <button onclick="pauseVideo();">Pause</button>
</body>
</html>