HTML <video> tagS2C Home « HTML <video> tag
Definition
The <video> tag is used to embed video content into a HTML document.
The <video> tag can be used in conbination with the <source> to provide a list of videos where the first valid one is played, or standalone.
The <video> tag was introduced in HTML5.
Examples
<video controls autoplay width="200" height="200" poster="../images/fbimg.JPG">
<source src="../pages/HD0405.mp4" type="video/ogg">
<source src="../pages/HD0405.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<video controls src="../pages/HD0405.mp4" width="200" height="200">
Sorry, your browser doesn't support embedded videos.
</video>
Video courtesy of MovieTOOLS
Attributes
The following attributes can be used with the <video> tag.
| Attribute | Value | Description | Example |
|---|---|---|---|
autoplay | empty string or autoplay | Specifies the video will play as soon as it is ready. | |
controls | empty string or controls | Specifies whether to display video controls such as stop/play/pause. | |
height | datetime | Specifies the height of the image in pixels. | |
loop | empty string or loop | Specifies whether to continue playing the video in an endless loop. | |
muted | empty string or muted | Specifies whether the video is muted. | |
poster | url | Specifies the URL location of an image to display while video is loading. Must be a valid URL of an image. |
|
preload | auto, none and metadata | Specifies if the video should be prelodaed and if so, how. | |
src | url | Specifies the URL location of a video file. | |
width | datetime | Specifies the width of the image in pixels. | |
| Attribute | Description | Example |
|---|---|---|
| Common | ||
class | Specifies a classname for the element allowing you to apply the style of the predefined class to the content. | |
id | Specifies a unique id for the element allowing you to apply the style of the predefined id to the content. | |
style | Specifies an inline style for the element allowing you to apply the style to the contentt. | |
title | Specifies an inline style for the element allowing you to apply the style to the content. | |
| Keyboard | ||
accesskey | Specifies a keyboard shortcut to associate with the element. | |
tabindex | Specifies a tab order for the element. | |
| Language | ||
dir | Specifies the directional flow of the content. | |
lang | Specifies a language code for the content of the element. | |
spell | Specifies an inline style for the element allowing you to apply the style to the contentt. | |
translate | Specifies an inline style for the element allowing you to apply the style to the content. | |
| Miscellaneous | ||
content | Specifies whether the content of the element is editable. | |
draggable | Specifies whether the element is draggable. | |
hidden | Specifies whether the element is not yet, or no longer, relevant. | |
| Attribute | Description | Example |
|---|---|---|
| Document Element | ||
oncopy | The script to be run when the user copies the content of an element. | |
oncut | The script to be run when the user cuts the content of an element. | |
onpaste | The script to be run when the user pastes some content into an element. | |
| Drag and Drop | ||
ondrag | The script to be run when an element is dragged. | |
ondragend | The script to be run when an element has stopped being dragged. | |
ondrag | The script to be run when an element has been dragged to a valid drop target. | |
ondrag | The script to be run when an element leaves a valid drop target. | |
ondragover | The script to be run when an element is being dragged over a valid drop target. | |
ondrag | The script to be run at the start of a drag operation. | |
ondrop | The script to be run when a dragged element is being dropped. | |
| Form | ||
onblur | The script to be run when the element loses focus. | |
onchange | The script to be run when object changed and attempt to leave field. | |
oncontext | The script to be run when a context menu is triggered. | |
onfocus | The script to be run when the element gets focus. | |
oninput | The script to be run when an element gets user input. | |
oninvalid | The script to be run when an element is invalid. | |
onreset | The script to be run when a dragged element is being dropped. | |
onselect | The script to be run when some or all of the contents of an object are selected. | |
onsubmit | The script to be run when a form is submitted. | |
| Keyboard | ||
onkeydown | The script to be run when an element is in focus and keyboard key is pressed down. | |
onkeypress | The script to be run when an element is in focus and keyboard key is pressed down and released. | |
onkeyup | The script to be run when an element is in focus and keyboard key is released. | |
| Media | ||
onabort | The script code to be run on abort. | |
oncanplay | The script to be run when a file has buffered enough so it is ready to start playing. | |
oncanplay | The script to be run when a file can be played all the way to the end without further need of buffering. | |
oncue | The script to be run when the cue changes when using the track element. |
|
onduration | The script to be run when the length of the media is changed. | |
onemptied | The script to be run when a media resource element suddenly becomes empty, usually due to an error. | |
onended | The script to be run when the media has reach the end. | |
onloaded | The script to be run when media data is loaded and playback can start. | |
onloaded | The script to be run when metadata has been loaded. | |
onload | The script to be run whenthe media resource has started loading. | |
onpause | The script to be run when the media resource has been paused. | |
onplay | The script to be run when the media resource starts playback. | |
onplaying | The script to be run when when playback has already begun. | |
onprogress | The script to be run when the browser is fetching the media data. | |
onrate | The script to be run when the playback rate changes. | |
onseeked | The script to be run when the seeking attribute is set to false indicating that seeking has finished. | |
onseeking | The script to be run when the seeking attribute is set to true indicating that seeking is currently active. | |
onstalled | The script to be run when the browser is unable to continue fetching media data. | |
onsuspend | The script to be run when media data has stopped before being completely loaded. | |
ontime | The script to be run when the media resources current playback position has changed. | |
onvolume | The script to be run when the volume has changed or been muted. | |
onwaiting | The script to be run when the media resource has paused but is expected to resume. | |
| Mouse | ||
onclick | The script to be run when when a mouse is clicked on an element. | |
ondblclick | The script to be run when a mouse is double clicked on an element. | |
onmouse | The script to be run when he mouse button is pressed down while the cursor is over an element. | |
onmouse | The script to be run when the mouse button is moved. | |
onmouseout | The script to be run when the mouse cursor moves off an element. | |
onmouse | The script to be run when the mouse cursor moves over an element. | |
onmouseup | The script to be run when the mouse button is released while the cursor is over the element. | |
onwheel | The script to be run when the mouse wheel rolls up or down over an element. | |
| Scroll | ||
onscroll | The script code to be run when the scrollbar of an element is being scrolled. | |
| Window - NONE | ||