Vue中videojs的配置

videojs(el, options, cb): 接受三个参数: video标签id, 要实例化的videojs配置, 回调函数;

 

常用的videojs配置选项:

• preload: 是否预加载
• muted : 实现静音播放, 有一些浏览器需要静音才能实现加载之后自动播放
• controls: 将显示视频控件, 如果不需要则去掉controls即可
• autoplay: 视频在加载完成之后自动播放
• poster: 视频封面图片
• loop: true/false, 是否循环播放
• notSupportMessage: 浏览器无法播放时的提示信息
• techOrder: 播放控件,默认是html5,这里需要播放rtmp所以首选项要是flash
• fluid: 流式布局,自适应父元素大小
  更多的配置可以看videojs-options

 

常用方法和事件

1. autoplay()获取或者设置自动播放属性
2. currentTime()设置或者获取当前播放进度
3. duration()获取视屏的总长度，一般要等到视屏对象完全加载后才能获取到，一般我们会使用定时轮询的方式来获取总时长
4. ended()获取当前视屏对象是否已经处于结束状态
5. enterFullWindow() 当全屏不支持我们可以视频容器延伸到浏览器将让我们一样宽。经过试验改api完全无法使视屏进入全屏。分析源码后发现真正进入全屏的api应该是requestFullscreen()，但可惜该api只能又手势触发函数执行，连模拟点击都没法触发他。
6. exitFullscreen() 退出全屏，有效的
7. exitFullWindow() 退出全屏，试了没什么用
8. height() 设置/获取播放器的高度
9. width() 设置/获取播放器的宽度
10. isFullscreen() 检查是否处于全屏模式
11. load() 开始加载视屏
12. loop() 在视频中获取或设置循环属性元素
13. muted() 获取当前的静音状态
14. pause() 暂停视频
15. paused() 检查视屏是否暂停
16. play() 播放视屏
17. played() 检查视屏播放状态
18. preload() 获取或设置预加载属性
19. ready() 视屏对象加载完成后调用ready中的回调函数
20. poster() 获取或设置海报图像源url
21. reset() 重载视屏
22. src() 更换视频源
23. dispose() 销毁视频实例

当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。

<video controls></video>

//全屏按钮
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
//播放按钮
video::-webkit-media-controls-play-button {
    display: none;
}
//进度条
video::-webkit-media-controls-timeline {
    display: none;
}
//观看的当前时间
video::-webkit-media-controls-current-time-display{
    display: none;           
}
//剩余时间
video::-webkit-media-controls-time-remaining-display {
    display: none;           
}
//音量按钮
video::-webkit-media-controls-mute-button {
    display: none;           
}
video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;           
}
//音量的控制条
video::-webkit-media-controls-volume-slider {
    display: none;           
}
//所有控件
video::-webkit-media-controls-enclosure{
    display: none;
}