Video.js 自定义播放器控件

Question

我正在搜索如何自定义播放器以供 dash.js 实时使用，由于浏览器播放器不能很好地处理实时会话，我现在尝试删除搜索栏和时间指示器，将来我将搜索可以管理实时缓冲区的搜索栏。但是我找不到正确的属性来设置 seekBar: false 并且每次指示器都关闭，我找到了这个列表 https://docs.videojs.com/tutorial-components.html，但其中的组件似乎不起作用。哪些是排除该控件的正确属性？或者可能是语法问题？

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

音量控制到假功：

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

我的尝试不起作用

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

谢谢！

马西莫

Answer 1

我被指示使用 CSS 端来 show/hide 任何不需要的值。

所以，我一直在使用下面的样式定义中的前四行：

<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>

后四行（删除前导“#”字符后）应该适合您。（请注意，您可以仔细阅读链接文件 'video-js.css' 了解当前定义。

Answer 2

只需要修正拼写错误即可，改为在第一个字符处使用小写字母： progressControl 而不是 ProgressControl

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

工作示例： http://jsbin.com/damahev/2/edit?html,js,output

Answer 3

这对我有用：

this.video = videojs('some-id', {
  bigPlayButton: true,
  controlBar: {
    fullscreenToggle: false,
    pictureInPictureToggle: false,
    remainingTimeDisplay: false,
    volumePanel: false,
    currentTimeDisplay: true,
    timeDivider: true,
    durationDisplay: true
  }
})

要使 currentTimeDisplay、timeDivider 和 durationDisplay 正常工作，您还需要添加此 CSS:

.vjs-current-time {
  display: inline-block !important;
}

.vjs-time-divider {
  display: inline-block !important;
}

.vjs-duration {
  display: inline-block !important;
}

Video.js 自定义播放器控件

Video.js Customizing player controls

javascript

video.js