How to insert a button that may be modified without refreshing the page to the videoJS controlBar?

Tech QnA
1

I want to add a button inside the controlBar of the player that is made by using videoJS. But, I also wish that the value of this button will change automatically when the video resolution change.

2

You can add a button to the control bar of a video.js player and dynamically update its value based on changes in video resolution to accomplish this. Here is a simple example that makes use of video.js and JavaScript:

HTML Structure: Make sure your HTML structure has both the required video and the video element.JS libraries.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
</head>
<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
    <source src="your-video.mp4" type="video/mp4">
    <!-- Add additional sources for different resolutions if needed -->
  </video>

  <script src="your-script.js"></script>
</body>
</html>

JavaScript (your-script.js): Create a JavaScript script to add a button to the control bar, alter the video.js player’s appearance, and dynamically adjust its value in response to changes in video resolution.

document.addEventListener('DOMContentLoaded', function () {
  // Initialize video.js player
  var player = videojs('my-video');

  // Add a custom button to the control bar
  var resolutionButton = player.controlBar.addChild('button', {
    text: 'Resolution: Loading...',
    class: 'vjs-resolution-button',
    clickHandler: function () {
      // Your button click logic here, if needed
      console.log('Button clicked!');
    }
  });

  // Function to update the button value based on video resolution
  function updateResolutionButton() {
    var resolution = player.videoWidth() + 'x' + player.videoHeight();
    resolutionButton.el().innerHTML = 'Resolution: ' + resolution;
  }

  // Event listener for resolution change
  player.on('loadedmetadata', updateResolutionButton);
});

In this case, when the resolution varies or the video’s information is loaded, the updateResolutionButton function is triggered. The button’s text is updated to reflect the current video resolution. Modify the code in accordance with your unique needs and preferred style.