HTML5 Video Tag – Beginners Guide for Web Developers – 012
HTML5 Video Tag.
This tutorial is connected from the previous HTML5 tutorial, the “HTML5 Form Attributes“.
In this tutorial, you will learn how to use Video in your HTML5 content.
Video is one of the coolest feature of HTML5. It is because you don’t have to rely on Flash Player or YouTube video.
The best feature of the video tag of HTML5 is that it is using your interface of whatever device your on. So, let’s say you are using your mobile phone. So, if you are on your phone, it uses your phone’s default skin for playing videos. In that way, the interaction feels comfortable.
Also, you don’t have to build the play or pause stuff in your Video file because HTML5 supports control. It is up to you if you want to have a custom video control.
Example of HTML5 Video Tag.
First, look for your sample video on your computer and we will be using the video tag.
[html5]
<video src=”video/IMG_0463.mov” width=”500″ height=”500″ controls></video>
[/html5]
The expected output of your HTML5 code should be like this:
As you can see, it has controls at the bottom which is really convenient to the users. Also, try to remove the controls parameter at your video tag and you will notice that the controls are being removed. So, it is important as well to include the controls parameter in your video HTML5 tag.
Note that some browsers to say the least, are not supported by HTML5 video tag. So on our next tutorial, we will be discussing about HTML5 Video Compatibility and Formats. Stay tuned webbies!
For questions or any other concerns or thesis/capstone creation with documentation, you can contact me through the following:
E-Mail: [email protected]
Facebook: facebook.com/kirk.lavapiez
Contact No.: +639771069640
Ian Hero L. Lavapiez
BSIT Graduate, soon to be MIT.
System Analyst and Developer
Related topic(s) that you may like: