Anyway, let's see it in action.
To put the video inside the code use the < video > tag. Inside the <video > tag we absolutely have to put the source of the video itself, otherwise it's not gonna work.
<video>
<source src="MyVideo.ogv" type="video/ogg"/>
</video>
Or we can make it even more simple
<video src="MyVideo.ogv"></video>
Basically that's it, if you're thinking only about users of Firefox and Chrome... Because we used only the .ogv video file and this is gonna work only in the newest Firefox and Chrome browsers, that supports HTML5.
So now we will add very few lines to our code, to make it work in all major browsers.
To do that we will use the .mp4 file for IE9+ and Safari
<video>
<source src="MyVideo.ogv" type="video/ogg"/>
<source src="MyVideo.mp4" type="video/mp4"/>
<video/>
Well now that's it.... basically....
The video will be placed into the web page or application, but... the are no controllers. How to play the video? How to pause it, how to stop it...? For that we need to put the CONTROLS
<video controls="controls">
<source src="MyVideo.ogv" type="video/ogg"/>
<source src="MyVideo.mp4" type="video/mp4"/>
<video/>
Now we have a player with our video, there are of course other things that you can add to the video tag, like TABINDEX (to start and stop the video using keyboard), AUTOPLAY (to start the video once the page is loaded automatically), LOOP (to loop, start the video again once it's finished playing) and you can also add the poster image to your video player using POSTER...
<video controls="controls" tabindex="0" autoplay="autoplay" loop="loop" poster="MyImage.jpg">
<source src="MyVideo.ogv" type="video/ogg"/>
<source src="MyVideo.mp4" type="video/mp4"/>
<video/>
Enjoy your video !!! ;)
No comments:
Post a Comment