a blog for those who code

Saturday 22 August 2015

Little about video element in Html5

In this post we are going to discuss about <video> element in Html5. The <video> element in Html5 is properly known as "Flash Killers" because it was designed to replace the Flash objects. Before Html5 we need to use embed the video in a web page using <embed> element but thanks to <video> element of Html5 which makes it a lot easier to embed the video in a web page.

Current Browser Support of Video Element

Example :

<video width="400" height="300" controls="controls">
    <source src="small.mp4" type="video/mp4" />

The controls attribute in the video element indicates that control panel with play, pause, volume and progress will be defined.

Note on Restriction : You cannot embed a youtube or dailymotion video using the <video> element. To embed a youtube video in Html you need to use iframe element and not video element.

Attributes of <video> element

1. src : Source of the Video
2. width and height : Size of the video displayed
3. controls : Controls for video playback and volume to be shown or not.
4. autoplay : It will start playing the video as soon as the page is ready. Be careful with this attribute if you are targeting mobile users. As it will slow down the page loading by consuming the bandwidth.
5. loop : To play the video in loop mode.
6. poster : This attribute allows you to use an image which will be shown to the user when the video is getting downloaded.
7. preload : The preload attribute is used when autoplay is not used. It has three possible values none - do nothing, metadata - download metadata of the video (ex - length, format), auto - it is decided by the browser.

Control <video> elements from JavaScript 

Yes you can control the <video> element using JavaScript. <video> element has has methods, attributes and events that can be manipulated using JavaScript. For example, to create video element we will use the below code :

var video = document.createElement('video');
video.src = 'small.mp4';
video.controls = true;

Then there is a JavaScript API which gives you a powerful tools to manipulate the <video> element.

PC : http://www.w3.org/2010/05/video/mediaevents.html

Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment