HTML 5 Elements in a Look: Part 3
Introduction
If you are new to HTML 5, I suggest you to 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:
HTML5 has introduced a new element <video>. Let us see how to use that element.
[html]
<video width=“500” controls>
<source src=“sibi.mp4″ type=“video/mp4″>
It seems your browser is an outdated one, be new year.
</video>
[/html]
Please find that I have added only a MP4 type. You can add the ogg type as follows:
[html]
<source src=“mov_bbb.ogg” type=“video/ogg”>
[/html]
Complete Markup
[html]
<!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>
[/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:
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.
- Add UI elements
- Create the functions in the scripts
[html]
<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>
[/html]
[html]
<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>
[/html]
[html]
<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>
[/html]
Complete Markup
[html]
<!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>
[/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,
