How to work with Video in HTML5
Work with video in
HTML 5
In this article we will see how to work with Video in HTML5.
As we know, HTML5 is enhancedd version of HTML and supports various media to
play in web browser without any help of third party plug in like flash.
Video play in HTML5 is very easy; it’s as simple as display
image in browser. HTML5 has introduced <video> tag to play video but it
is supporting by only latest browser. If you are using older browser I will recommend
you to update it before work with below code.
Display Simple video
in browser
It’s very simple again, only you have to give path/location
of your video file. Try to understand below code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<video controls="controls">
<source src="Video1.mp4" type="video/mp4" />
</video>
</body>
</html>
Set height and width
property.
Now, if you want to set your own height and width then only
you have to set them in <video> tag just like height and width of other
elements in HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<video height ="300" width ="300"
controls="controls">
<source src="Video1.mp4" type="video/mp4" />
</video>
</body>
</html>
In <video> tag you will find one
more property called controls we have set here.
This property will automatically generate control (like
pause/play/mute) etc to control video.
Custom controls on
video.
If we are not satisfied with in built controls of video tag
then we can generate our own controls with the help of little JavaScript code.
Try to understand below code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Work with Video in HTML5</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<div>
<button
onclick="playVideo()">Play/Pause</button>
<button
onclick="Makebig()">Big</button>
<button
onclick="Makesmall()">Small</button>
<button
onclick="Makenormal()">Normal</button>
<br />
<video
id="myvideo">
<source
src="Video1.mp4" type="video/mp4" />
</video>
</div>
<script type="text/javascript">
var myvideo=document.getElementById("myvideo");
function playVideo ()
{
if
(myvideo.paused)
myvideo.play();
else
myvideo.pause();
}
function Makebig ()
{
myvideo.height=(myVideo.videoHeight
* 2 );
}
function Makesmall ()
{
myvideo.height=(myVideo.videoHeight
/2);
}
function Makenormal ()
{
myvideo.height=(myVideo.videoHeight);
}
</script>
</body>
</html>
