html5-video - 使用 video.js 更改视频播放速度

Question

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

提前致谢。

Answer 1

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

<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，输出

学分：https ://stackoverflow.com/a/24767026/1066234

注意：您必须对 . 中的参数使用双引号data-setup。

-

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

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

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

Answer 2

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

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

请参阅videojs 文档

Answer 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();

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