HTML5 Video Dom
Video Dom is such an enhanced feature, which make video playing more reliable and user friendly. With the help of Video Dom now you can customize the Video playing, as we can add additional buttons to play, stop, resize and many more.
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<video width="420" height="375" id="video1">
<source src="media/sample_video.mp4" type="video/mp4" />
<source src="your ogg media file name" type="video/ogg" />
Your browser does not support the video tag.
</video>
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<script type="text/javascript">
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>
</body>
</html>
No comments:
Post a Comment