使用 video.js 更改视频播放速度答案

【问题标题】：Change the video playback speed using video.js使用 video.js 更改视频播放速度
【发布时间】：2013-10-07 09:08:28
【问题描述】：

是否有任何现有的插件可以使用 video.js 播放器更改视频的播放速率？如果没有，如何添加新插件和新控制按钮？

提前致谢。

【问题讨论】：

标签： html5-video video.js

【解决方案1】：

从 videojs v.4.6.0 开始，data-setup 有一个 JSON 参数，您可以传递该参数以将播放速度选项添加到视频播放器：

<video id="my_video_1" class="video-js vjs-default-skin" controls 
preload="auto" width="640" height="268" 
data-setup='{ "playbackRates": [0.5, 1, 1.5, 2] }'>

演示：http://jsbin.com/vikun/1/edit?html,output

致谢：https://stackoverflow.com/a/24767026/1066234

注意：data-setup 内的参数必须使用双引号。

有用：如果需要在视频播放器准备好（Jquery）后改变速度，使用：

var video = videojs('videoplay', options);

video.ready(function() {
    // faster speed initially
    this.playbackRate(1.5);
});

【讨论】：

var options = {playbackRates: [0.5, 1, 1.5, 2] };

【解决方案2】：

我也有同样的问题。我刚刚发现：

videojs('my-player', {
  playbackRates: [0.5, 1, 1.5, 2]
});

见videojs docs

【讨论】：

这似乎已被弃用。现在在核心上支持播放速率。更多信息：github.com/videojs/video.js/blob/stable/docs/api/…
@Meetai.com：该链接现已断开。当前一个：github.com/videojs/video.js/blob/…
videojs('my-player', {playbackRates: [0.5, 1, 1.5, 2] });

【解决方案3】：

var player = videojs('videoplay');
player.ready(function() {
   var _this = this
   var playbackRate = $("#playbackRate").val();
   var speed = parseFloat(playbackRate);

   var volume = parseFloat($("#volume").val()/100.0); //[0,100]

   setTimeout(function() {
       _this.playbackRate(speed);
       _this.volume(volume); //work for audio
   },20);
});
player.src('/media/'+data.uuid+'.m3u8');
player.play();

上面的代码在生产环境中适用于我，真的很难理解为什么我们要在播放音频流之前延迟片刻。

【讨论】：