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

Posted 2023-05-08

【中文标题】使用 video.js 更改视频播放速度

【英文标题】：Change the video playback speed using video.js

【发布时间】：2013-10-07 09:08:28

【问题描述】：

是否有任何现有的插件可以使用 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"   
data-setup=' "playbackRates": [0.5, 1, 1.5, 2] '>

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

致谢：https://***.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();

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