HTML5 Video + DOM
HTML5 <video> - Take Control Using the DOM
The HTML5 <video> element also has methods, properties, and events.
There are methods for playing, pausing, and loading, for example. There are properties (e.g. duration, volume, seeking) that you can read or set. There are also DOM events that can notify you, for example, when the <video> element begins to play, is paused, is ended, etc.
The examples below illustrate, in a simple way, how to address a <video> element, read and set properties, and call methods.
Example 1
Create simple play/pause + resize controls for a video:
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br />
<video id="video1">
<source src="your_video_File_Here.mp4" type="video/mp4" />
<source src="your_video_File_Here" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div>
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.height=(myVideo.videoHeight*2);
}
function makeSmall()
{
myVideo.height=(myVideo.videoHeight/2);
}
function makeNormal()
{
myVideo.height=(myVideo.videoHeight);
}
</script>
</body>
</html>
HTML5 <video> - Methods, Properties, and Events
The table below lists the video methods, properties, and events supported by most browsers:
| Methods | Properties | Events |
|---|---|---|
| play() | currentSrc | play |
| pause() | currentTime | pause |
| load() | videoWidth | progress |
| canPlayType | videoHeight | error |
| duration | timeupdate | |
| ended | ended | |
| error | abort | |
| paused | empty | |
| muted | emptied | |
| seeking | waiting | |
| volume | loadedmetadata | |
| height | ||
| width |
Note: Of the video properties, only videoWidth and videoHeight are immediately available. The other properties are available after the video's meta data has loaded.
