HTML 5 Elements in a Look: Part 3

Introduction

If you are new to HTML 5, I suggest you read my other article parts here:

Introduction to HTML5 Video

Before going through the video part, let us return to our previous version of HTML and discuss what all the issues are that we have encountered with those versions for playing the videos.

I will list the following problems:

We wanted to have an external plug in like Flash to play the video on our page.
There were no specific standard tags for playing the video.

HTML5 has introduced a new element <video>. Let us see how to use that element.

<video width="500" controls>
<source src="sibi.mp4" type="video/mp4">

It seems your browser is an outdated one, be new year.

</video>

Please find that I have added only a MP4 type. You can add the ogg type as follows:

<source src="mov_bbb.ogg" type="video/ogg">

Complete Markup

<!DOCTYPE html>
<html>
<title>HTML5 Video -Sibeesh Passion</title>
<body>
<div>
<video width="500" controls>
<source src=" sibi.mp4" type="video/mp4">
It seems your browser is outdated one, be new yaar.
</video>
<div>
<a href="Your video URL here">Your video URL here</a>.
</div>
</body>
</html>

Please note that this tag won't be supported in IE 8 and below.

Points to remember

Here are some points that you must remember:

The text “controls“ in the video markup is for adding the video player controls like play, pause and so on.
The text “It seems your browser is an outdated one, be new yaar.” It will display only if your browser won't support HTML5.
It is always good to set the width for the video element to avoid the flickering in the browser.

Adding your own controls (play, pause and so on)

You can also add your own controls like play and pause to the video element if you don't want to have the built-in control functionality.

Procedure:

You must remove the text controls from the element first.
Add the video tag.
1. <video id="video1" width="500">
2. <source src="sibi.mp4" type="video/mp4">
3. <source src="sibi.ogg" type="video/ogg">
It seems your browser is outdated one, be new yaar.
1. </video>
Add UI elements
1. <table>
2. <tr>
3. <td>
4. <div onclick="playOrpause()">Play/Pause</div>
5. </td>
6. <td>
7. <div onclick="big()">Big</div>
8. </td>
9. <td>
10. <div onclick="small()">Small</div>
11. </td>
12. <td>
13. <div onclick="normal()">Normal</div>
14. </td>
15. </tr>
16. </table>
Create the functions in the scripts.
1. <script>
2. var myVideo = document.getElementById("video1");
4. function playOrpause() {
5. if (myVideo.paused)
6. myVideo.play();
7. else
8. myVideo.pause();
9. }
11. function big() {
12. myVideo.width = 560;
13. }
15. function small() {
16. myVideo.width = 320;
17. }
19. function normal() {
20. myVideo.width = 420;
21. }
22. </script>

Complete Markup

<!DOCTYPE html>
<html>
<body>
<script src="jquery-1.9.1.js"></script>
<div>
<table>
<tr>
<td>
<div onclick="playOrpause()">Play/Pause</div>
</td>
<td>
<div onclick="big()">Big</div>
</td>
<td>
<div onclick="small()">Small</div>
</td>
<td>
<div onclick="normal()">Normal</div>
</td>
</tr>
</table>
<br>
<video id="video1" width="500">
<source src="sibi.mp4" type="video/mp4">
<source src="sibi.ogg" type="video/ogg">
It seems your browser is outdated one, be new yaar.
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playOrpause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function big() {
myVideo.width = 560;
}
function small() {
myVideo.width = 320;
}
function normal() {
myVideo.width = 420;
}
</script>
</body>
</html>

Wow, we have created our own controls.

Cool. That is all for today.

See you soon in the next part with another control. Please provide your valuable comments.

Kindest regards,

Sibeesh Venu.