HTML5 video tag Example Tutorial | Coding Like a Pro
HTML5 Video Tag Example Tutorial

HTML5 Video Tag Example Tutorial

The Basics

How to go with html5 <video> tag? A lot of people wish to know this hidden programming practice. Don’t worry. We will attempt to demystify it.

To ensure you have a proper grasp of what it is all about, we will include references, specific examples and clarification.

If you know a little about HTML5, that’s great! But, if you don’t, just relax. We will briefly review HTML to help you catch up.

So what does HTML mean?

The full meaning of HTML is Hyper Text Markup Language. It is the language used to build a web page.

Please understand this…

  • It explains how markup is used to structure web pages
  • Elements are used to build HTML pages
  • Tags are used to represent elements

Now, we can proceed to review HTML in a broader picture.

HTML is not a programming language. It’s actually a tag language. What this means is that we give the browser a command on what we want. It receives our message, interprets the tags (i.e. the message) and delivers the results as HTML markup, just as we instructed it.

Examples of HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

This pictorial example is an easy HTML page markup with a standard markup.

The HTML5 video tag

To delve into this point, it is better we take a look at the examples of html5 video tags first. That will give us a good start.

Here is the example:

<video>
    <source src="html5vid.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

While the <video> tag serves as the opener, the <source> tags come next, and then the </video> tag which is the closure.

It’s important to note that the video tag can accept such files as MP4, OGG and WebM.

This video tag equally supports features or attributes also. We can see this in the next set of example.

HTML5 video tag attributes

This suggests the features in the <video> tag you may get to see when using the file.

These features include:

control you can use this feature to regulate how the video plays., For instance, you can use it to play, pause, stop the video etc.

mute with this feature, you can mute or silence the sound of the video.

Until May, 2018, programmers were not able to attach video tags to autoplay on mobile devices. To help, there came the thumb rule.  A programmer will therefore need to set this feature when they want to embed video tags.

However, the problem still persists. Why? Because video support browser support on mobile phones is needed. And, so, programmers cannot succeed in implementing live video auto play except they use Javascript/Jquery.

More so, this is not enough. Even, the video will not autoplay on some devices.

src just like we have already stated, in other to set the video source, you will have to use an assist tag <source src=””>   What this does is to give support to the browser. But, mind you. You shouldn’t include src in the video tag just straight away. You should do that only when the need arises.

width What this tag signifies is the width of the video player. Most times, we actually do not include inline width hitml5 video tags.

height This is exactly as stated with the width of the player. You should apply the same method.

autoplay What this does is to set an autoplay attribute to the video while the page is loading.

You need to be very attentive to this attribute. It actually doesn’t usually work on mobile devices by itself. It needs a Javascript or Jquery code to work. Here is another example of html5 video tag. This one has attributes:

<video id="myVid" controls autoplay>
    <source src="html5vid.mp4" type="video/mp4">
    <source src="new.ogg" type="video/ogg">
</video>

It’s easy, right? At least, the attributes and id call are very clear for you to see.

Conclusion

This is much we can take on this tutorial. Sure, you will have learned a lot about HTML5 video tags. What you need to do is to apply carefulness in your practice and stick with the rules.

Spread the love
9 votes, average: 4.89 out of 59 votes, average: 4.89 out of 59 votes, average: 4.89 out of 59 votes, average: 4.89 out of 59 votes, average: 4.89 out of 5 (9 votes, average: 4.89 out of 5)
You need to be a registered member to rate this.
Loading...

Leave a Reply