Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Get the Current Playback Time in Video.js?
Video.js is a library that lets you create a modern looking and advanced video player with support for all traditional video formats like mp4, Flv, etc. In addition, it also supports the latest video formats like YouTube, Vimeo, etc. In this tutorial, we're going to comprehend how to get the current playback time of a video player created using video.js.
Video.js provides you the flexibility to control even the minute aspects of your video player without any hassle. So, for the purpose of this tutorial, we'll try to get the current playback time of a video player. Getting the current playback can be very beneficial, as it has a lot of applications like getting the current playback time and invoking a function at a specific time or pausing the music player at a specific time. So, let's move on to the subsequent section of this tutorial to understand how we can get the current playback time of a video player.
Getting the Current Playback Time in Video.js
Prerequisite − Assuming that you know how to create a basic video player using the video.js library.
For getting the current playback time of a video.js player, we're going to use a default method of video.js. The method is called currentTime and it is responsible for showing the time of a video player in seconds. Using this method is very easy and straightforward. We just need to invoke the currentTime() method on our video player reference.
The currentTime method cannot be used in the <html> part of the code in the 'data-setup' attributes. It needs to be invoked in the <script> section of the code on the player reference.
Consider the following code snippet to alert the current playback time of a video player using video.js −
<script>
// Video Player Initialization
let player = videojs('my-video-player');
// Alerting the current Time of a video player
let currentTime = player.currentTime();
window.alert(`currentTime : ${currentTime}`);
</script>
Here, we've created a video player for an <video> element with id as 'my-video-player'. Then we used the currentTime method on the player to get the current time of the video player in seconds. In the last line, we've alerted the current time of the video in the browser window.
Example 1
Using the above snippet in a complete example to get the current time of a video player will look something like this −
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Current Playback Time Example</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
autoplay="true"
preload="true"
controls="true"
muted="true"
fluid="true"
poster=" https://www.tutorialspoint.com/videos/sample.png"
data-setup='{}'
>
<source
src="https://www.tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Video Player Initialization
let player = videojs('my-video-player');
// Alerting the current Time of a video player
let currentTime = player.currentTime();
window.alert(`currentTime : ${currentTime}`);
</script>
</body>
</html>
Explanation
In this code example, we've implemented the following −
First, we've imported CSS and JS file of video.js using the CDN URL in the <head> tag of our code.
Next, we've created a <video> element for our video player with various classes such as 'video.js vjs-default-skin vjs-big-play-centered' and 'my-video-player' as the video 'id', inside the <body> section.
We've also used some standard HTML video options like controls, and poster for the <video> element, and we've used also use the fluid attribute to make our video player responsible.
In the <script> tag section, we've initialized a video player with the id as 'my-video-player' and then used the currentTime method to get the current time and then show it in the web browser using the window.alert method.
When you'll execute the above code in a web browser, you'll notice you get an alert as "currentTime: 0", and then your video player is loaded. Video.js is alerting the current Time of the video player, i.e., 0 seconds in our case. But that is not very helpful as it displays just 0 seconds every time we reload the video player.
The problem is that the currentTime method is invoked as soon as the video player is created. So, at that time, the playback time is 0 seconds only.
Let's say you want to see the current time continuously as the video plays forward. For that, we can club the 'currentTime' method with the 'timeupdate' event listener which updates about time changes every 15-200 ms. We'll log the current playback time of the video player every 'timeupdate' event.
Consider the code snippet below for logging the current playback time of the video as soon as it changes −
<script>
// Video Player Initialization
let player = videojs('my-video-player');
// Using time update event listener
player.on('timeupdate', function () {
// Get current time and log
let currentTime = player.currentTime();
console.log("Current Time of the Video Player: ", currentTime)
});
</script>
In this code snippet, we've first initialized our video player with the <video> element having id as "my-video-player". Next, we used the 'timeupdate' event listener using the player.on() method. Inside the 'timeupdate' method, we are getting the current playback time of the video player using the player.currentTime() method and then finally logging that time in the console of our web browser.
Example 2
Our complete example to get the current playback time of a video player at every time update event will look like this −
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Current Playback Time Example</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
autoplay="true"
preload="true"
controls="true"
muted="true"
fluid="true"
poster="https://www.tutorialspoint.com/videos/sample.png"
data-setup='{}'
>
<source
src="https://www.tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Video Player Initialization
let player = videojs('my-video-player');
// Using time update event listener
player.on('timeupdate', function () {
// Get current time and log
let currentTime = player.currentTime();
console.log("Current Time of the Video Player: ", currentTime)
});
</script>
</body>
</html>
Explanation
As you can see, in the <script> section, we've used the time update event listener which is triggered every 15-250 ms, which means the function inside the time update listener will get triggered 3-4 times in a second. And every time the time update function is triggered, we are getting the current time of the video player and log it in the browser console.
When the above code is executed in the web browser, a video player will be created and in the console tab of our browser, you'll receive the current playback time of the video at least three to four times in a second. So, the console tab will have multiple entries like “Current Time of the Video Player: 1.527636” where 1.52 is the current playback time of the video player in seconds.
So, this is how you can use the currentTime method to get the current playback time of a video player created using video.js.
Conclusion
In this tutorial, we understood how to get the current playback time of a video in video.js. We used the current time method present in video.js by default for the same. This method returns the current time of a video player in seconds. We also explained how you can use this method along with the time update event listener with the help of a fully working example.
912 Views
