Current Browser Support of Video Element
Example :
<video width="400" height="300" controls="controls">
<source src="small.mp4" type="video/mp4" />
</video>
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.
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;
document.body.appendchild(video);
Then there is a JavaScript API which gives you a powerful tools to manipulate the <video> element.
Please Like and Share the Blog, if you find it interesting and helpful.
No comments:
Post a Comment