html5 video tag example tutorial
ever wondered about the secrets of html5 video tag? wounder no more, in the following html5 video tag example tutorial we are going to drill down and grasp the concept of the html5 video tag. We will use examples, references, and explanations.
I’m going to go ahead and assume you have an understanding in HTML5, for those who don’t I’m going to cover a super quick reference about HTML. Starting from a few points that are fairly easy to understand.
What is HTML?
HTML is the standard markup language for creating Web pages.
- stands for Hyper Text Markup Language
- describes the structure of Web pages using markup
- elements are the building blocks of HTML pages
- elements are represented by tags
let’s have a quick explanation in regards of HTML.
html is a tag language, not a programming language. Meaning? we tell the browser what we want to do, using HTML tags. In return, the browser interprets those tags and renders the HTML markup we told it too.
html5 tag example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
The top example is standard markup, a simple HTML page markup. If you want to read a bit on HTML you’re welcome to visit W3S Documentation pages.
The HTML5 video tag
let’s start with a simple html5 video tag example and go from there:
<video> <source src="html5vid.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video>
<video> tag is our opener, followed by
<source> tags and closure with the
A keynote to take in close regard is that the video tag supports MP4, OGG, WebM files.
The HTML5 video tag accepts attributes as well, let’s have a closer look at that.
html5 video tag attributes
Key attributes in the <video> tag and things you will likely encounter:
controls if set in the tag in allows controls for the video – play, pause, etc.
muted sets the video to mute.
src as implied, the source for the video, we usually use an assist tag to set sources under the video tag.
<source src=""> It ensures browser support. Don’t implement an src within the video tag, only if you have to for some reason.
width simple, the width of the player, usually we don’t set inline width attributes in html5 video tags.
height as mentioned about the width, pretty much the same.
autoplay sets an attribute of an autoplay to the video as the page loads.
Take have a look at another html5 video tag example, this time with some attributes:
<video id="myVid" controls autoplay> <source src="html5vid.mp4" type="video/mp4"> <source src="new.ogg" type="video/ogg"> </video>
simple enough, you can see the attributes and an id call.
You can check out the full HTML Audio/Video DOM Reference HERE.
Basically, that’s pretty much it on this subject, keep tuned for a post where I will explain the way on implementing autoplay videos on mobile devices. If you have any questions please free to comment or visit the references provided on this page.