Child

HTML5 Video - DOM Methods and Properties



As we have discussed about VIDEO ELEMENT. Now there is also an extended feature of VIDEO ELEMENT, that is VIDEO DOM. With the help of this feature of VIDEO ELEMENT we can create the button for our event handling. As we can create a button for play or pause the video, and we can also render the size with the help of external button.

HTML5 has DOM methods, properties, and events for the <video> and <audio> elements.

These methods, properties, and events allow you to manipulate <video> and <audio> elements using JavaScript.

There are methods for playing, pausing, and loading, for example and there are properties (like duration and  volume). There are also DOM events that can notify you when the <video> element begins to play, is paused, is ended, etc.

The example below illustrate, in a simple way, how to address a <video> element, read and set properties, and call methods.

Here is code for VIDEO/DOM:

<div style="text-align:center; padding-top: 1em;">
<video id="video1" width="420">
<source src="mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
<button onclick="playPause()">Play/Pause</button><button onclick="makeBig()">Big</button><button onclick="makeSmall()">Small</button><button onclick="makeNormal()">Normal</button>
</div>
<script>// <![CDATA[
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=530;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
// ]]></script>

HTML5 Video Tags

Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as <video> and <audio>
<track> Defines text tracks in mediaplayers