HTML video Tag - Embed video element
-
HTML
<video>tag is used to embed video content in a HTML document without required any additional plug-in like Flash player or any other plug-in. Currently, the<video>tag support MP4, Ogg, and Webm formats. -
HTML
<video>tag introduce in HTML5.
Supported Video format and MIME Type
HTML <video> tag, supports 3 types of video files
-
MP4 - MIME-type video/mp4
-
Ogg - MIME-type video/ogg
-
Webm - MIME-type video/webm
| Browser | MP4 | Ogg | Webm |
|---|---|---|---|
| Google Chrome | |||
| Mozilla Firefox | |||
| Safari | |||
| Microsoft Edge | |||
| Opera |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML video tag</title>
</head>
<body>
<video src="../../images/rolling_sample.mp4" width="300" height="170" controls="controls">
<p>Your browser does not support the <video> tag.</p>
</video>
</body>
<html>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML video tag</title>
</head>
<body>
<video controls>
<source src="../../images/rolling_sample.ogv" type="video/ogg"/>
<source src="../../images/rolling_sample.mp4" type="video/mp4"/>
<source src="../../images/rolling_sample.webm" type="video/webm"/>
Display this message, if your browser does not support video tag.
</video>
</body>
<html>
<video> Tag Attributes
HTML <video> tag support following specific attributes.
| Attributes | Value | Description |
|---|---|---|
| autoplay | autoplay | Attached video will play automatically when it loads. |
| controls | controls | Specifies that controls should display with the audio player such as play, stop, pause button. |
| height | pixels | Specifies the height, to display the video. |
| loop | loop | Specifies that video will automatically start over again, when reaching the end of the video. |
| muted | muted | Specifies that the audio will be initially silenced, when the video is played. |
| poster | URL | Specifies the image to be shown while the video is downloading or until user start to play video. |
| preload | none auto metadata |
Specifies how the author thinks the video file should be loaded as per best user experience. |
| src | URL | Specifies the URL of video file. |
| width | pixels | Specifies the width, to display the video. |
Global Attributes
HTML <video> tag support following global attributes.
| Attributes | Value | Description |
|---|---|---|
| id | unique_name | Declared unique id for an element. |
| class | class_name | Declared one or more classnames for an element. |
| style | styles | CSS inline styles specify an element. |
| title | title | Specify extra details of element contain, this will display as a "tooltip" for an elements. |
Event Attributes
HTML <video> tag support following event attributes.
| Attributes | Value | Description |
|---|---|---|
| onfocus | script | element gets focus on object when script tobe run. |
| onblur | script | element lose the focus on object when scrip tobe run. |
| onabort | script | element gets aborted on object when script tobe run. |
| onchange | script | element gets anytime change on object when script tobe run. |
| onbeforeunload | script | element gets unloaded on object when scrip tobe run. |
| onclick | script | clicked on object when script tobe run. |
| ondblclick | script | double click on object when script tobe run. |
| onkeydown | script | key is pressed when script tobe run. |
| onkeypress | script | key is pressed over element then released when script tobe run. |
| onkeyup | script | key is released over element when script tobe run. |
| onmousedown | script | mouse button was pressed over an element when script tobe run. |
| onmouseout | script | mouse pointer release over an element when script tobe run. |
| onmousemove | script | run mouse pointer moved when script tobe run. |
| onmouseover | script | run mouse pointer move over when script tobe run. |
| onmouseup | script | mouse button is released when script tobe run. |
| onreset | script | form has been reset when script tobe run. |
| onselect | script | Select some content when script tobe run. |
| onsubmit | script | form has been submitted when script tobe run. |
| onload | script | object has load when script tobe run. |
| onchange | script | allow to change the object when script tobe run. |
| onunload | script | unload to the browser window when script tobe run. |
| ondrag | script | element being dragged when script tobe run. |
| ondragend | script | element being stop dragged when script tobe run. |
| ondragenter | script | element being go target dragged when script tobe run. |
| ondragleave | script | element being leave to target dragged when script tobe run. |
| ondragover | script | element being over to target dragged when script tobe run. |
| ondragstart | script | element being start dragged when script tobe run. |
| ondrop | script | element being dropped when script tobe run. |
| onerror | script | element error occurs when script tobe run. |
| onmessage | script | element message display when script tobe run. |
| onerror | script | element error occurs when script tobe run. |
| onmousewheel | script | mouse wheel will be rotate when script tobe run. |
| onscroll | script | scrollbar is scroll when script tobe run. |
| onresize | script | element should be resize when script tobe run. |
| onselect | script | all element content selected when script tobe run. |
| onstorage | script | element should be store in target when script tobe run. |
Browser Compatibility
- Google Chrome
Yes - Mozilla Firefox
Yes - Microsoft Edge
Yes - Opera
Yes - Safari
Yes