Monday , 20 November 2017
Home / Programming / JavaScript / Video – Advanced JavaScript Tutorial
Video
Video

Video – Advanced JavaScript Tutorial

Videos have finally become possible since the introduction of HTML5. It is VERY easy to work with videos as the good guys at W3C made a very simple API to use. Before you get started, please make sure to download the source code for this tutorial as it contains the video files for this tutorial.

Video Tags

Before we dig into the JavaScript of things, we first must learn about the <video> tags. Let’s update our <body> tags to this.

There are 2 ways to include a HTML5 video. You can use the src attribute for the video tag. However, this isn’t recommended as you can’t specify multiple sources if you have them. The sad part is that not all media types are supported in all browsers. The 2  formats you should always have is the WebM and MPEG-4 format.

To add a source, you use the <source> tag. You must specify 2 attributes. One is the source for the video and the other is the type.  You can also add text in your <video> tags as it’ll display if the user’s browser doesn’t support HTML5 videos.

Let’s take it to the next step by adding some HTML attributes to our video tag. Update your video tag to this.

Some of these are self-explanatory, but let’s learn what they do.

  • autoplay – Once the video is finished downloading, then the video will autoplay.
  • controls – This gives you controllers for the video such as play, pause, mute and full screen. These vary from browser to browser.
  • loop – The video will play from the beginning once it’s finished playing.

Remove these attributes. You can also set them in JavaScript. Before I move onto that, notice that I set the <video> tag’s ID to vid for us to reference.

Properties

Clear out your script and add this bit of code.

First we must grab our video. After that, we can start to get all the properties from it. There are A LOT of properties to go over, but here are just some of them.  You can set the autoplay, controls and muted attributes to true or false if you like. By default, they’re false. For a list of all properties, then go here.

http://www.w3schools.com/tags/ref_av_dom.asp

Right now our video doesn’t do a lot. Of course, we can just add the autoplay and control attribute, but we can also do this in JavaScript. By doing it in JavaScript, then you can create a totally custom player and add more features to it.

Conclusion

In our next tutorial, we’ll take a look at some video events we can use to play our video and add custom controls. For more information on the video element, then go here.

http://www.w3schools.com/tags/tag_video.asp

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link