The W3C – The World Wide Web Consortium has started updating the HTML standard for displaying objects on the web. They are the ones that define how HTML tags should work. With HTML 5, the W3C is starting to move away from the reliance on plugins to play video or audio objects, while also creating new HTML tags that are commonly used on websites – such as footers, or navigation. More importantly, HTML 5 came out with new API’s that are available for use.
In this example we will take a look at one of the new tags – video. And use the new API’s defined in HTML 5 to play / pause the video.
Creating an HTML 5 document is not hard. It is the same as creating the HTML 4 standard.
<!DOCTYPE HTML>
<html>
<head>
<title>HTML 5 Video Tag Test</title>
</head>
<body>
... code goes in here
</body>
</html>
Now we want to add the video tag. According to the W3C – http://dev.w3.org/html5/spec/Overview.html#video we can define a video tag by using <video>. There are some attributes that we can use to define the video tag:
| src | defines the video source | |
| width and height | defines the width and height of the video object | |
| loop | allows the video object to loop at the end of the video | |
| autoplay | defines if the video should play once the video tag has been loaded | |
| controls | defines if the video controls should be displayed | |
| preload | defines if the video should preload the file when the website loads |
In our example we want to use the src and the controls so we can start and stop playing. To do so we have to include the video tag in our code. We must define controls as “controls” so that the browser would display the basic, play / pause buttons.
<video controls="controls" src="myvideo.ogg">
your browser does not support the video tag
</video>
As you can see I have a simple copy inside the video tag that claims that the user’s browser does not support the video tag. With HTML 5 still being worked on, not all browsers can view the HTML 5 standard. As a result, those browsers would not be able to render the video tag. Instead they would see the copy “your browser does not support the video tag”.
Also note, because HTML 5 has not been fully standardized yet, the video tag is still up in the air. Different browsers can only play different video types. Firefox and Opera browsers can play .ogg files – more commonly known as Ogg Vorbis, while Safari can play H264 videos. Chrome can play both ogg and H264 files. The debate on which video files to play is still underway. Ogg Vorbis is open source while H264 is not. However since the video tag has not been fully standardized yet, this debate still continues.
In our case we are going with the .ogg format. Now if you are on a Safari browser, you can change the src to a .mp4 file format, which uses the H264 video.
Now we do not need to use the browser’s controls to play / pause the video. We can use the HTML 5 Video API for that.
We can add a couple of anchor tags to our code so we can play or pause the video.
<a href="#" onClick="myControlFunction('play');">Play</a>
<a href="#" onClick="myControlFunction('pause');">Pause</a>
We can use javascript to control the video tag and use the HTML 5 Video API. According to the W3C we can tell the video object to play and pause by using the play() and pause() methods.
<script>
function myControlFunction(videoSelect){
var video = document.querySelector('video');
if( videoSelect == "play" ) {
video.play();
} else if( videoSelect == "pause" ){
video.pause();
}
}
</script>
What this code does is that it searches for the video tag and sets it in the variable I designated called “video”. With the object in my “video” variable, I can use the Video API methods of play() and pause(), to play or pause the video. I passed in a small variable into my function which would tell me which button was pressed. If the play button was pressed, I want the video to play and vice versa.
And there we have it, a simple play pause video demo using HTML 5 and the Video HTML 5 API.