Search code examples
javascriptvideo.js

Video.js Customizing player controls


Im Searching how to customize the player for live use with dash.js, as browser player not work wel with live session i trying to delete seekbar and time indicators for now, in the future i will search for a seekbar that can manage live buffer. But I can't find the correct attribute to set seekBar: false and every time indicator off, I find this list https://docs.videojs.com/tutorial-components.html but the components seems to not work. Which are the correct attribute to exclude that controls? Or maybe is a syntax problem?

http://jsbin.com/aheVeCOG/2/edit?js,output

Volume control to false work:

var video = videojs('my_video_1', {
  children: {
    controlBar: {
      children: {
        volumeControl: false 
      }
    }
  }
});

My try don't work

var video = videojs('my_video_1', {
  children: {
    controlBar: {
      children: {
        ProgressControl: false 
      }
    }
  }
});

Thanks!

Massimo


Solution

  • I was instructed to use the CSS side to show/hide any undesirable values.

    So, I've been using the top four lines in style defn below for mine:

    <style>
    		.video-js .vjs-current-time { display: block; }
    		.video-js .vjs-time-divider { display: block; }
    		.video-js .vjs-duration { display: block; }
    		.video-js .vjs-remaining-time { display: none; }
    		
    		#.video-js .vjs-mute-control { display: none; }
    		#.video-js .vjs-volume-menu-button { display: none; }
    		#.video-js .vjs-volume-bar { display: none; }
    		#.video-js .vjs-progress-control { display: none; }
    </style>

    The bottom-four lines (after removing leading '#' char) should work for you. (Note that you can peruse the linked file 'video-js.css' for current defns.