Video play in HTML 5

Video play

Up to now there is no straight solution to play video in web pages. We need to take help of third party tool(Flash , Microsoft silverlight )to play video. To enjoy the service user need to install those plug-in in there system. This has so disadvantages , because different browser need different plug-ins. But using HTML 5 we can smartly solve this problem.

Code to play video in HTML 5 is.

<video width="200" height="150" controls="controls">
  <source src="myvideo.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
</video>

The controls attribute represent video control (like play ,pause ,mute etc)

Video tag is used to play video.

Src attribute of source tag specify the path of video.

N.B:-Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:

Controlling video with play pause and resize method.

1)Cppy and paste below code . It will display four buttons and one video frame.

<div style="text-align:center">

  <button onclick="play()">Play/Pause</button>

  <button onclick="big()">Big</button>

  <button onclick="small()">Small</button>

  <button onclick="normal()">Normal</button>

  <br />

  <video id="myvideo">

    <source src="movie.mp4" type="video/mp4" />

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

  </video>

</div>

2)Now write following JavaScript function to control your video element. Put this code in head section to your page.

<script type="text/javascript">

var myVideo=document.getElementById("myvideo");

function play ()

{

if (myVideo.paused)

    myVideo.play();

else

  myVideo.pause();

}

function big()

{

myVideo.height=(myVideo.videoHeight*2);

}

function small()

{

myVideo.height=(myVideo.videoHeight/2);

}

function normal()

{

myVideo.height=(myVideo.videoHeight);

}

</script>