VideoJs倍速播放
一、VideoJs倍速播放
最近在看视频时，想使用倍速播放，但在界面上无法调整速度，通过分析发现网站用的是VideoJs，因此记录下如何自定义VideoJs的播放速度。
- 设置倍速函数
function changeRate(rate){
//获取播放器对象
let player = videojs(document.querySelector('.video-js'));
player.ready(function(){
//播放器就绪后设置速率
this.playbackRate(rate);
});
}
- 应用
//设置1.25倍速
changeRate(1.25);
//设置2.5倍速
changeRate(2.5);
二、VideoJs简介
1、简介
Video.js是专门为HTML5世界构建的网络视频播放器，它支持HTML5视频和现代流媒体格式，支持在桌面和移动设备上播放视频。
2、入门
- 加载相关CSS和JS文件
<link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script>
- 创建播放器
<video class="video-js" poster="poster.jpg" data-setup='{}' controls>
<source src="./gypsophila.mp4" type="video/mp4">
</video>
也可以使用<video-js>元素，<video>在某些浏览器可能无法正常使用。
播放器安装(setup)的方式除了data-setup={"controls": true, "autoplay": false, "preload": "auto"}方式外，也可以使用下面的方式：
videojs(document.querySelector('.video-js'));
//或
videojs(document.querySelector('.video-js'), {controls:true,autoplay:false,preload:'auto'});
如果在video元素上设置属性，则应该这样写：<video loop="loop" preload="auto" controls ...>，而不是controls="false"。
- 全局默认值
播放器的默认选项都可以在videojs.options中找到，并且可以直接更改；例如设置自动播放：
videojs.options.autoplay = true;
- 播放器准备就绪
由于Video.js技术可能被异步加载，所以在安装后立即与播放器交互并不总是安全的，因此Video.js提供了准备就绪的机制；本质上来说，可以为播放器定义任意数量的就绪回调函数：
<video-js id="my-player" class="video-js" controls>
<source src="./gypsophila.mp4" type="video/mp4">
</video-js>
var player = videojs('my-player');
player.ready(function() {
console.log('ready...');
});
- 初始化时指定速率
videojs('my-player',{
playbackRates: [1, 1.25, 1.5, 2, 2.5]
});
3、其他函数
var player = videojs('my-player');
- 调整音量
player.volume(0.5);
- 全屏与退出全屏
player.requestFullscreen();
player.exitFullscreen();
- 播放与暂停
player.play();
player.pause();
- 设置当前播放时间
以秒为单位。
player.currentTime(60);