Saturday, February 11, 2012

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" />

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" />

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);

function big()
function small()
function normal()

No comments:

Post a Comment