How to initially mute videos in the video.js player?

In this tutorial, we're going to learn how to initially mute videos in the video.js player.

For this tutorial, we're not going to make use of the standard HTML tags like 'muted' which are available for a video element, instead, we're going to use the method specific to video.js. So, let's move on to the subsequent section of this tutorial and understand how to initially mute videos in the video player using just video.js.

For muting the videos of our video.js player, we'll make use of the 'muted' method and 'volume' method provided by video.js. We can make use of this method to mute our video player by various procedures. We're mainly going to focus on the following −

Changing the 'muted' method in the 'data-setup' attribute
Dynamically Muting our video player using Video.js.
Using the 'volume' method to mute our videos

Let's dive in to understand each of these methods −

Changing the 'muted' method in the 'data-setup' attribute

The 'muted' method accepts a boolean value as a parameter and as the name suggests mutes or unmutes the volume of our video player.

For muting the video player initially by default, we have to set the value of the 'muted' method as true in the 'data-setup' attribute. Consider the below code snippet for accomplishing the same.

<video
   id="my-video-player"
   class="video-js vjs-default-skin vjs-big-play-centered"
   controls="true"
   autoplay="true"
   preload="true"
   fluid="true"
   width=580
   height=350
   data-setup='{ "muted": true }'
>
<source
   src="https://www.tutorialspoint.com/videos/sample720.mp4"
   type="video/mp4"
>

The code excerpt above, set the 'muted' option in the 'data-setup' attribute to true for our <video> element −

Note − Since the data-setup attribute accepts a JSON object, please make sure you're passing a valid JSON string inside the data-setup attribute, or else the code is not going to execute properly.

Example 1

The complete example for muting the video player initially using video.js will look something like this −

<!DOCTYPE html>
<html>
<head>
  <title>Video.JS Mute Video by Default</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"
      autoplay="true"
      preload="true"
      fluid="true"
      width=580
      height=350
      data-setup='{ "muted": true }'
   >
   <source
      src="https://www.tutorialspoint.com/videos/sample720.mp4"
      type="video/mp4"
   >
   </video>
   <script>
      // Video Player Initialization
      let player = videojs('my-video-player');
   </script>
</body>
</html>

In the overhead code, we've implemented the following things −

First, we've used the free CDN URL to import the required CSS and JS files of video.js in the 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.
We've also used some standard HTML video options like controls, and poster for the <video> element, and fluid attribute has been used to make the video player responsive. Notice that we're not using the standard HTML 'muted' attribute.
Instead, we're setting the 'muted' attribute using video.js inside the 'data-setup' attribute of the <video> tag, as true.

When we execute the above example in the web browser, a video player will be created which will be muted initially.

Now that we've learned how to use video.js to mute the videos on initialization, let's learn how to achieve the same dynamically using JavaScript.

Dynamically muting our video player using Video.js

In this part of this tutorial, we're going to see how to dynamically mute the video player using JavaScript for a video player created using video.js.

For muting our videos initially, we need to create a JSON Object in JavaScript which will be having the 'muted' key as false (Boolean value) and then we'll pass this JSON object to our video player reference while initializing our video player.

Consider the following code snippet for muting our video player dynamically using JavaScript.

<script>
   // Muting Video Player using video options
   let videoOptions = { "muted": true };

   // Video Player Initialization
   let player = videojs('my-video-player', videoOptions);
</script>

In the above piece of code, we're muting the video in video.js player by setting the 'muted' attribute as true and then passed it to the initialization of our video player reference which has an id as 'my-video-player'.

Example 2

Making use of the above snippet in the complete example will be something like this −

<!DOCTYPE html>
<html>
<head>
   <title>Video.JS Mute Video by Default</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"
      autoplay="true"
      preload="true"
      fluid="true"
      width=580
      height=350
      data-setup='{ "muted": true }'
   >
   <source
      src="https://www.tutorialspoint.com/videos/sample720.mp4"
      type="video/mp4"
   >
   </video>
   <script>
      // Muting Video Player using video options
      let videoOptions = { "muted": true };

      // Video Player Initialization
      let player = videojs('my-video-player', videoOptions);
   </script>
</body>
</html>

Executing the above example will create a video player in our web browser and the video will be muted by default, exactly like the previous example.

So, this was the second method for initially muting the videos in the video.js player. Now let's move on to the next section where we learn how to use the volume method for muting the video.

Using the 'volume' method to mute our videos

In this section, we'll make use of the 'volume' method available for the video player reference. The volume method takes a numeric value as the input parameter. This value is the percentage of volume to be set on the video player initially.

We're going to set the volume percentage value as 0 for our video player reference. Consider the code snippet below for achieving the same −

<script>
   // Video Player Initialization
   let player = videojs('my-video-player');

   // Setting the volume of video player
   player.volume(0);
</script>

In the above code, we've initialized our video player, and then we're setting the initial volume as 0, so our video player will be muted by default.

Example 3

Adding the above snippet in the complete example will look like this −

<!DOCTYPE html>
<html>
<head>
<title>Video.JS Mute Video by Default</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"
      autoplay="true"
      preload="true"
      fluid="true"
      width=580
      height=350
   >
   <source
      src="https://www.tutorialspoint.com/videos/sample720.mp4"
      type="video/mp4"
   >
   </video>
   <script>
      // Video Player Initialization
      let player = videojs('my-video-player');

      // Setting the volume of video player
      player.volume(0);
   </script>
</body>
</html>

In the full example above, we're using the volume method to set the default volume of to '0'. If we set this value to 50, our video player will start with 50 percent volume initially.

Execution of this example will create a video player in the web browser which will be muted by default.

So, those were the three methods to mute our video player using video.js and we can use any of the above methods depending on our use case.

Conclusion

In this tutorial, we understood how to initially mute videos in the video.js player without using the standard HTML 'muted' attribute. We looked at the three methods using video.js for achieving the same like using the 'volume' and 'muted' video.js option references. We also saw one fully working example for each of those methods.

Prince Yadav

Updated on: 13-Apr-2023

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started