Tuesday , 18 June 2019
Home / Programming / JavaScript / Video Events – Advanced JavaScript Tutorial
Video Events
Video Events

Video Events – Advanced JavaScript Tutorial

Video events allow you to tap into what’s currently happening with the video. There are a couple of video events, but we’ll only go over the more common ones.

Let’s update our <body> tags to this.

We added a button and a place to display the duration and the current time of the video. Let’s update our script to this.

We just create some variables to hold the HTML tags in our document. We also create a variable for a timer which we’ll use later.

We add an event listener to the video which is the loadedmetadeta event. This event is important if you plan on using some of the properties of our video. This event will fire when our browser has downloaded and read the information about our video.  Next, we update our duration by grabbing the duration property in our video.

We’ll be adding the rest of our code inside this event so assume all code presented will be added into our event. With that being said, add this bit of code next.

Alright, so we add a click event to our button. Inside our function, we check to see if the video is paused by checking the paused property. If it’s true, then we know our video is paused and we can use the play() method to start playing the video. If false, then we pause the video with the pause() method. We also update the text inside the button to say Pause or Play accordingly.

Try using the button now and see if it works. If so, let’s move onto the next step. Add this bit of code next.

In the above code, we listen for 2 events which are the play and pause events from the video. Inside the play event, we create an interval timer and update our tag that holds the current time to the value of the currentTime property in the vid object.

The pause event will clear this interval for us.  Let’s take a look at one more event. Add this bit of code.

When our video has finished playing, then this event will fire. In this event, we set the start property to 0. This property allows you to define where the video should start. In our case, you want to set the start at 0 seconds.

You should now have a working video player.


There are more events and you should really look into them if you want to get a good feel on how videos work. You’ve now learned how to use videos and make your own basic video player. You can check out the list of events here.


About Jasko Koyn

Check Also


Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.