Work with video in HTML 5

Sourav.Kayal
Posted by in HTML 5 category on for Beginner level | Points: 250 | Views : 2609 red flag
Rating: 5 out of 5  
 1 vote(s)

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>


Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)