Play and Pause video in HTML5 using video tag

Advertisement

This tutorial will show you how to use HTML5 tag with a simple example. HTML5 standard provides a way to show video inside a browser without using any plugin (like flash). Flash plugins etc was only way to show video before HTML5.

HTML5 supports Ogg, WebM and MP4 format. To embed a video inside a HTML page you need to use video tag. Inside the video tag you can include multiple source video files.



Option ‘controls’ of video tag provides the basic video controls on the video – like play, pause, seek bar, volume control. If you omit this, these controls will not be shown. Inside the video tag, you can define source tag which would have the actual video file path that you want to play. You can mention the path in src properties.

Now, we will try to access its play() and pause() method using JavaScript.

var v=document.getElementById("myvideo");
function play_video() {
v.play();
}
function pause_video() {
v.pause();
}

Lets add two event handler to call these two functions – play_video() and pause_video().

PLAY
PAUSE


play_lnk.addEventListener('click', play_video, false);
pause_lnk.addEventListener('click', pause_video, false);

Complete Code:







<< Back to Article

HTML5 video tag demo





View Demo Download Code

You may also like...

Translate »