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
var v=document.getElementById("myvideo"); function play_video() { v.play(); } function pause_video() { v.pause(); } play_lnk.addEventListener('click', play_video, false); pause_lnk.addEventListener('click', pause_video, false);