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 Play a Video from a Particular Time in video.js Player?
In this tutorial, we’re going to learn how to play a video from a particular time in video.js Player. Video.js is a well-known and widely used open-source HTML5 video player. It enables you to develop a video player for a broad range of video formats, including traditional video formats like mp4, WebM, Flv, and others, as well as current video-playing formats such as YouTube, Vimeo, and Twitch.
So, for the purpose of this tutorial, we’re going to play a video from a particular time in the video.js player. Starting or playing a video from a specific time has a lot of applications like sharing a video from a certain specific time. Now let’s understand how we can change the start position of our video player in the following section of the tutorial.
Playing a video from a particular time in video.js Player
For playing a video from a particular time in video.js Player, we’re going to use a method reference of video player known as ‘currentTime’. This method is exposed by video.js only by default.
‘currentTime’ method takes a numeric value as an input parameter and skips those number of seconds from the start of the video to start our video from a specific time. Additionally, this option reference string as input value and changes our video time to the value passed, given the value is a valid time in seconds. For example, if we want to play our video starting from 30 seconds instead of 0 seconds, we can pass the value to the current time method as 30.
Prerequisite − Assuming that you know how to create a video player and the basic usage of the video.js library.
Consider the following code snippet for playing our video player from a particular time in the video.js player (30 secs for our case) −
<script>
// Initializing the video player
var player = videojs('my-video-player', {});
// starting a video from a particular time
player.currentTime(30);
</script>
As you can notice in the above code example, our video player will id as ‘my-video-player’ has been initialized and then we’ve set the initial time or the starting time of the video player as 30 seconds by passing it as an input parameter to the currentTime method as a number.
So, our video player will skip the first 30 seconds of the video and the video will start playing from 30 seconds.
Example 1
The complete example for playing a video from a particular time in video.js will look something like this −
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Play Video from a Particular Time</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"
controls="true"
muted="true"
autoplay="true"
preload="auto"
fluid="true"
poster="assets/sample.png"
data-setup='{}'
>
<source
src=" https://www.tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player
var player = videojs('my-video-player', {});
// starting a video from a particular time
player.currentTime(30);
</script>
</body>
</html>
In the above example, we’ve implemented the following −
First, we’ve used the free CDN URL to import the required CSS and JS files of video.js in the <head> section of the HTML 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.
This id has been used to reference the video player in the <script> tag below. We’ve also used some standard HTML video options like controls, muted, autoplay, and poster for the <video> element and fluid attribute has been used to make the video player responsive.
In the bottom <script> tag section, our video player with id as ‘my-vide-player’ has been initialized, and then we used the currentTime method on the video player with a value of 30 seconds.
On the execution of the above example, a video player will be created in the web browser which will be playing our video from the 30 seconds mark instead of the 0 seconds.
So, we’ve successfully played our video from a particular time i.e., 30 seconds by passing the value ‘30’ as a numeric parameter to the current time method reference. But we can also pass the input value as a string parameter to this method.
Consider the following piece of code to use the pass a string parameter to the currentTime method (taking 60 seconds as example this time) −
<script>
// Initializing the video player
var player = videojs('my-video-player', {});
// starting a video from a particular time
player.currentTime("60");
</script>
This snippet also looks mostly similar to the above except but here in this one we’ve set the value of the starting time of our video as a string (“60”) while earlier is was a numeric value (30). Apart from that, everything is exactly the same.
Example 2
Adding the above piece of code in our full example to play our video from 60 seconds mark will look something like this −
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Play Video from a Particular Time</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"
controls="true"
muted="true"
autoplay="true"
preload="auto"
fluid="true"
width=580
height=350
data-setup='{}'
>
<source
src="https://www.tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player
var player = videojs('my-video-player', {});
// starting a video from a particular time
player.currentTime("60");
</script>
</body>
</html>
In the above example, in the <script> section, you’re going to notice that the input parameter type of our current time method has been changed from a string from a number and this time the value passed to this method is for 60 seconds.
On execution, this example is also going to create an almost similar video player which is going to start playing our video from a particular time i.e., 60 seconds instead of 0 seconds.
So, those were the two ways you can make use of the current time method to play our video from a particular time in the video.js player.
Note that the starting time values which are being passed to the video.js currentTime method, cannot exceed the overall length of the video. For example, you cannot pass 1000 seconds as a value for a video that is only 5 minutes or 300 seconds long. In such scenarios, the video will just start from the end i.e you will only see a replay button as if the video has already been played completely.
Conclusion
In this tutorial, we understood how to play a video from a particular time using video.js. We achieved so by using a default option reference of video.js which is known as the currentTime method. We also have a look at the two types of input parameters for this method (string and number) with the help of a fully working example for each one of those.
2K+ Views
