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 Create a Video Loop in the Video.js Player?
Video.js is a well-known online video player JavaScript toolkit that is used to create web browser video players for a range of video formats. Video.js is a very flexible and customizable library to create modern web video players. It supports a wide range of packages, plugins, and options. Using video.js, any part of an HTML video player can be configured as per your liking.
For the purpose of this tutorial, we're going to create a video loop in a video.js player i.e., playing the video in a loop repeatedly. Usually looping, a video is done by playing the video again from the start as soon as it completes. Let's move on to the next section of this tutorial to understand how can we achieve the same using video.js.
Creating a Video Loop in Video.js Player
For creating a video loop in a video.js player, we need to make use of the loop method reference provided by video.js by default. This option reference can be toggled on and off just by setting Boolean true or false values. If passed a true/false Boolean value, the loop method will play our video repeatedly in a loop.
A loop method reference can be used with our video in the following ways −
Loop Attribute on the <video> element
Using Loop inside 'data-setup' with the <video> tag
Setting Loop dynamically using JS
Let's quickly have a look at all of the above-mentioned methods.
Loop Attribute on the <video> Element
Prerequisite − Assuming that you know how to create a basic video player using the video.js library.
For enabling a seamless loop on our video, we need to set the 'loop' attribute as true on the <video> element. Consider the below code excerpt for achieving the same.
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
controls="true"
muted="true"
loop="true"
autoplay="true"
poster=" https://www.tutorialspoint.com/videos/sample.png"
data-setup='{}'
>
<source
src="https://www.tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
In this code snippet, we've added the loop attribute on our <video> element and set its value as true to enable a seamless video loop. This attribute will make sure that our video starts playing again as soon as it ends once.
Example 1
The complete video player example with a video loop will look like this −
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Loop Video 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"
preload="true"
fluid="true"
controls="true"
muted="true"
loop="true"
autoplay="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
const player = videojs('my-video-player');
</script>
</body>
</html>
In this example, the following things are implemented −
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. The fluid attribute is also used for making the video player responsive.
'Loop' attribute has been used on the <video> element to create a video loop.
If we execute the above code, it will create a video player in the browser which will keep playing in a continuous never-ending loop. As soon as the video ends, it will start playing again from the beginning.
Now that we've learned one method to create a video loop, let's move on to the next section of this tutorial to understand the next method.
Using Loop Inside 'Data-setup' With the <video> tag
In this sub-section, we'll use the loop option reference inside the 'data-setup' attribute of video.js. Setting the value to true for the loop option reference inside the 'data-setup' attribute on the <video> element will create an endless video loop.
Consider the following snippet for creating a video loop in video.js player using the 'data-setup' attribute −
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
fluid="true"
controls="true"
muted="true"
autoplay="true"
poster="https://www.tutorialspoint.com/videos/sample.png"
data-setup='{"loop": true}'
>
<source
src="https://www.tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
As you can notice in the above code snippet, we've added a loop option inside the 'data-setup' attribute of our <video> element.
Since the data-setup attribute accepts a JSON object, please make sure you're passing a valid JSON inside the data-setup attribute.
Example 2
Using the above snippet in the complete example to create a seamless video loop will look something like this −
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Loop Video 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"
preload="true"
fluid="true"
controls="true"
muted="true"
autoplay="true"
poster="https://www.tutorialspoint.com/videos/sample.png"
data-setup='{"loop": true}'
>
<source
src="https://www.tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Video Player Initialization
const player = videojs('my-video-player');
</script>
</body>
</html>
As you can notice in the above example, we've removed the loop attribute from the <video> element and used it as an option reference inside the 'data-setup' attribute.
When you execute the above code, a video player is going to be created which will again be playing the video in an endless loop.
Now let's move on and discuss the final method where we will create a video loop dynamically using JavaScript.
Setting Loop Dynamically Using JS
In this section of the tutorial, we'll see set the loop method dynamically using JavaScript. First, we need to create a "js" object containing the loop attribute with the Boolean value as true and then pass it to the video.js player initialization.
Consider the below code snippet for creating an endless video loop in the video.js player dynamically using JavaScript.
<script>
// setting loop option to true
let videoOptions = {
loop: true
}
// Initializing the video player with video options
var player = videojs('my-video-player', videoOptions);
</script>
In this code snippet, we added 'loop' option in the video option JSON object and set it value as true. Later, we passed it to the initialization of our video player reference which has an id as 'my-video-player'.
Example 3
Adding the above code excerpt to the complete example will make the code look like this −
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Loop Video 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"
preload="true"
fluid="true"
controls="true"
muted="true"
autoplay="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>
// setting loop option to true
let videoOptions = {
loop: true
}
// Initializing the video player with video options
var player = videojs('my-video-player', videoOptions);
</script>
</body>
</html>
If you notice the above example carefully, we've removed the loop method reference from the 'data-setup' attribute in the <video> tag. Instead, we've dynamically added the method to our video player in the <script> tag, dynamically.
However, when you execute the above code in a web browser, the same video player will be created as in the example above. And just like the above example, our video will be playing in a seamless loop. So, we've successfully created a video loop in the video.js player.
Conclusion
In this tutorial, we understood how to create an endless video loop in a video.js player. We achieved the same using 3 methods. First, we used the 'loop' attribute on the <video> element. In the second method, we passed the 'loop' option reference in the 'data-setup' attribute. Finally, in the last method, we set the same option reference as an option for our video reference.
540 Views
