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 hide the seek bar in the video.js player?
In this tutorial, we'll look at how to hide the seek bar or progress bar of a video player using video.js. Video.js lets you create video players for a video of video formats like mp4, WebM, and FLV and also for modern video playback formats like YouTube, Vimeo, Flash, etc. Video.js is widely used on a number of websites because of the extensive plugin support it provides alongside supporting a wide range of devices like desktops, mobiles, etc.
For the purpose of this tutorial, we're to customize our video player by disabling or hiding the control bar of the video player. By hiding the seek bar of the video player, we ensure that the end user will not be able to skip the video and they will have to watch the entire video. This can be really helpful when you're trying to display an advertisement video. Let's move ahead to the next section of the tutorial and learn how can we achieve the same.
Hiding the Seek Bar in the Video.js Player
For hiding the seek bar of a video.js player, we are going to make use of the 'progressControl' option reference exposed by video.js. This option reference has multiple methods like disable() or hide() which are used for disabling and hiding the progress bar or seek bar respectively.
The 'progressControl' attribute could be used in many ways. For this tutorial, we're going to focus on the following three methods mainly −
Disabling seek bar using 'progressControl' option reference
Hiding seek bar using 'progressControl' option reference
Hiding seek bar by removing the progress control bar display attributes
Let's quickly have a look at each of these methods
Disabling the seek bar using 'progressControl' option reference
Prerequisite − Assuming that you know how to create a basic video player using the video.js library.
We can disable the seek bar of a video.js player completely by using the disable method of progressControl option reference on the video player initialization.
For example, if you have a Video.js player with the id my-video-player, you can disable the seek bar of the player like this −
<script>
// Initializing the video player with video options
const player = videojs('my-video-player');
// Disabling the progress control from the control bar
player.controlBar.progressControl.disable();
</script>
As you can notice in the above code snippet, we've used the "controlBar.progressControl" option reference which is responsible for handling the progressBar method. We've used the 'disable()' method of this option reference to make sure the seek bar of our video player is disabled.
Please note that, this method will disable the seek bar and not hide it. The user will see the seek bar but will not be able to interact with it.
Example 1
The complete example for hiding the seek bar for a video.js player will look something like this −
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Hide Seek Bar in Video Player</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"
preload="true"
muted="true"
autoplay="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 with video options
const player = videojs('my-video-player');
// Hide the progress control from the control bar
player.controlBar.progressControl.hide();
</script>
</body>
</html>
How to hide the seek bar in the video.js player?
First, we used the CDN URL of video.js to import the necessary JS and CSS files related to video.js.
Next, we've created an <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 muted, and poster for the <video> element and fluid attribute has been used to make the video player responsive.
Next, we've initialized a video player for the video element which has an id as 'my-video-player'.
In the <script> section of the example, we've used the 'controlBar.progressControl' option reference with disable method on the video player initialization to disable the seek bar
When the above code is executed in the web browser, you'll notice that the video player will have the seek bar but you'll not be able to interact with it or change the position of the video playhead.
Using the above option reference, you can disable the seek bar of the video player. Now let's move on to the next section of this tutorial to see how can we hide or remove the progress bar from video player controls
Hiding the seek bar using 'progressControl' option reference
For hiding the seek bar of the video player, we can also use another method of "progressControl" option reference. Just like we use the disable method in the above example, we can also make use of the hide method. The hide method will hide the seek bar or progress from the video controls.
Consider the example below to hide the progress bar of the video.js player using the 'progressControl' bar hide method −
<script>
// Initializing the video player with video options
const player = videojs('my-video-player');
// Hide the progress control from the control bar
player.controlBar.progressControl.hide();
</script>
In the above code snippet, we've used the controlBar.progressControl option reference which is responsible for handling the progressBar method. We've used the 'hide()' method of this option reference to make sure the seek bar of our video player is hidden.
Example 2
The complete example for hiding the seek bar for a video.js player will look something like this
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Hide Seek Bar in Video Player</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"
preload="true"
muted="true"
autoplay="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 with video options
const player = videojs('my-video-player');
// Hide the progress control from the control bar
player.controlBar.progressControl.hide();
</script>
</body>
</html>
As you can notice in the above example, we've changed the visibility of the video player control bar by using the 'controlBar.progressControl.hide()' method on our video player reference.
When the above code is executed in a web browser, you'll notice that the control bar of the video player will be hidden.
Now, let's move on to the final method to hide the seek bar in the subsequent section of this tutorial.
Hiding the seek bar by removing the progress control bar display attributes
In this section of the tutorial, we'll learn how to hide the seek bar of the video player by changing the style properties.
We can change the display of the seek bar by using the 'el().style.display' attribute on the 'progressControl' method. Setting its value to none will change the display property of the seek bar and the seek bar will be hidden. This can also be done using CSS properties, but for the purpose of this tutorial, we'll be focusing on achieving this dynamically.
Consider the following code excerpt of changing the display of seek bar to hide it from the video.js player.
<script>
// Initializing the video player with video options
const player = videojs('my-video-player');
// Setting the display style of progress bar to none
player.controlBar.progressControl.el().style.display = 'none';
</script>
As you can see in the above snippet, we've set the "style.display" property of the contolBar progressControl method as none. This will ensure that the seek bar of our video player is hidden.
Example 3
Using the above snippet in the complete example to hide the seek bar of video.js player will look something like this:
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Hide Seek Bar in Video Player</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"
preload="true"
muted="true"
autoplay="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 with video options
const player = videojs('my-video-player');
// Setting the display style of progress bar to none
player.controlBar.progressControl.el().style.display = 'none';
</script>
</body>
</html>
In the above example, we've hidden the seek bar in the video.js player by setting the value of 'player.controlBar.progressControl.el().style.display' as none.
When the above code is executed in the web browser, the video player created will not have a seek bar.
So, those were the three methods to hide or disable the seek bar in a video.js player.
Conclusion
In this tutorial, we understood how to hide the seek bar in a video.js player. We achieved the same by using various methods of control bar and progress control option references, exposed by video.js. We saw three methods of achieving the same with the help of three fully working examples.
2K+ Views
