学习Video.js
查阅官方文档，学习video.js相关属性、回调与方法：
播放器选项设置
①标准的video标签属性
<video controls autoplay preload="auto" ...>②data-setup属性传递JSON
<video data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'...>③创建播放器实例以第二个参数配置
videojs('my-player', {
controls: true,
autoplay: false,
preload: 'auto'
});//修改选项
var player = videojs('my-player');
player.options({ enableSmoothSeeking: true });// 设置看不到播放时间前面的负号
player.options({
controlBar: {
remainingTimeDisplay: {
displayNegative: false,
}
},
});选项的学习
| 配置选项 | 含义 | 类型 |
| autoplay | 自动播放 | boolean|string |
| controlBar.remainingTimeDisplay.displayNegative | 默认情况下，剩余时间显示为负数时间 | boolean |
|
| 确定播放器是否具有可供用户交互的控件 | boolean |
| height | 设置视频播放器的显示高度（以像素为单位） | string|number |
|
| 使视频在结束后立即重新开始 | boolean |
|
| 默认情况下将静音所有音频 | boolean |
|
| 视频开始播放前显示的图片的 URL。这通常是视频的一帧或自定义标题屏幕。用户点击“播放”后，图片就会消失 | string |
|
| 建议浏览器是否在元素 | string |
|
| 要嵌入的视频源的源 URL | string |
|
| 以像素为单位设置视频播放器的显示宽度 | string|number |
|
| 将播放器置于流体模式，并在计算播放器的动态尺寸时使用该值。该值应表示一个比率 - 两个数字用冒号分隔（例如 | string |
|
| 如果设置为 true，则会异步隐藏除控制栏之外的所有播放器组件，以及仅用于视频的任何特定控件 | boolean |
|
| 如果设置为 true，则通过隐藏视频元素并持续显示海报图像来启用海报查看器体验。 | boolean |
|
| 阻止播放器运行具有 | boolean |
|
| 与responsive选项一起使用时，设置断点，配置如何在播放器上切换类名，以根据播放器的尺寸调整 UI | Object |
|
| 如果 | boolean |
|
| 这是一种不同于以前可用的画中画模式，其中整个播放器元素都以窗口形式显示，而不仅仅是视频本身。由于有些情况下希望在播放器上使用画中画，但不希望仅在视频上使用画中画（例如广告、叠加层），因此此 | boolean |
|
| 如果设置为 | boolean |
|
| 当 时 | boolean |
|
|
|
|
|
| - |
|
|
| 如果提供，并且元素尚无 | string |
|
| 设置播放器的初始语言 | string |
|
| 允许玩家使用新的实时用户界，如果没有此选项，进度条将被隐藏，取而代之的是指示 |
|
|
| 播放器的 liveTracker 组件的一个选项，用于控制何时显示 liveui。默认情况下，如果流在 seekBar 上的显示时间少于 20 秒，那么即使设置了 liveui 选项，我们也不会显示新的 liveui。 |
|
|
| 播放器的 liveTracker 组件的一个选项，用于控制距离可搜索端多远的播放应被视为实时播放。默认情况下，距离实时可搜索边缘 15 秒以外的任何内容都被视为落后于实时，其余所有内容都被视为实时 |
|
|
| 将此选项设置为 | boolean |
|
| 一个对象数组，用于反映原生 | Array |
在video.js创建好的实例上，立即触发ready回调，可调用一下方法
var player = videojs('my-player');
player.ready(function() {
console.log('播放器已就绪')
// 获取音量
// var getVolume = player.volume();
// 设置音量
// player.volume(0.5) // 设置音量
// 设置静音
// 布尔值 boolean
// player.muted(true)
// 获取播放器状态是否处于全屏
// player.isFullscreen()
// 设置播放器全屏
// player.isFullscreen()
// 创建播放器立即进入全屏
// player.requestFullscreen()
// 退出全屏
// player.exitFullscreen()
// 在有设置url的情况下，调用此方法开始播放
// player.play()
// 暂停播放
// player.pause()
// 获取播放时间
// 设置开始播放音频时间是两分钟开始播放
// currentTime 以秒为单位
// player.currentTime(120)
// 获取播放总时间
// player.duration()
// 返回剩余秒数
// player.remainingTime()
// 准备在未来时间播放的当前时间范围
// player.buffered()
// 缓冲视频的当前百分比
// player.bufferedPercent()
});| 方法 | 含义 | 参数 |
| volume | 设置音量 | number |
| muted | 设置静音 | boolean |
| isFullscreen | 是否处于全屏 | - |
| requestFullscreen | 立即进入全屏 | - |
| exitFullscreen | 退出全屏 | - |
| play | 播放 | - |
| pause | 暂停播放 | - |
| currentTime | 设置开始播放音频时间 | number/以秒为单位 |
| duration | 获取播放总时间 | - |
| remainingTime | 返回剩余秒数 | - |
| buffered | 准备在未来时间播放的当前时间范围 | - |
| bufferedPercent | 缓冲视频的当前百分比 | - |
播放完成的时候会触发ended回调
var player = videojs('my-player');
player.on('ended', () => {
player.dispose();
console.log('播放结束');
});| 方法 | 含义 |
| dispose | 销毁 |