如何在 jwplayer 中更改播放速率

Question

我想在 jwplayer 的 HTML5 模式下更改视频的播放速度。我对 Flash 浏览器不感兴趣，我们将仅对 HTML5 浏览器限制此功能

问题：我尝试在 jwplayer 中更改 HTML5 的播放率，但播放率未定义我在下面附上我的代码

    jwplayer('my-video').setup({
                 sources: [
                      {file:'./test.mp4' , type: "mp4" },
                     ],
                 width:'640px',
                 height:'360px', 
                 image : './test.jpg'
              });
$("#speed_10").click(function() {
        myVid=$( "#my-video" ).find('.jwvideo').find('video');
        alert(myVid.length);

        alert($( "#my-video" ).find('.jwvideo').find('video').attr('src'))
        alert(myVid.playbackRate)
        alert($( "#my-video" ).find('.jwvideo').find('video').length)
        $( "#my-video" ).find('.jwvideo').find('video').PlaybackRate=0.5; 

 });

第一个警报为 1
第二个警报未定义
第三个警报显示“来源”
第四个警报为 1

我能够捕捉到 div 但无法在 jquery 中更改播放速率！！！

http://www.longtailvideo.com/support/forums/jw-player/feature-suggestions/32556/playbackrate-support/

按照上面的链接，我也尝试过使用 java 脚本，它使用下面的代码工作

(document.getElementsByTagName('video')[0].playbackRate=0.2.

但是如果我使用上面的代码，我如何将它用于多个视频，因为上面的代码中没有涉及 ID [上面的 javascript 没有传递唯一的 ID]

下面是 jwplayer 的 div 结构

Answer 1

我找到了这个问题的答案，我在多个视频中面临的主要问题是如何使每个视频都是唯一的。我只需要先按 ID 获取 div，然后获取“视频”标签，而不是更改播放率
添加下面的代码

var video = document.getElementById('exampleId')
var video_speed = video.getElementsByTagName('video')[0]
alert(video_speed.playbackRate)

video_speed.playbackRate=0.2;
alert(video_speed.playbackRate)

我什至尝试了多个视频，效果很好

Answer 2

发现这个脚本手动操作 DOM 以实现自定义速度：

<script type="text/javascript">
  jwplayer("video").setup({
      image: 'https://<your_CDN_ID>.cloudfront.net/static/splash/<splash.png>',
      width: 960,
      height: 600,
      flashplayer: "https://<your_CDN_ID>.cloudfront.net/assets/jwplayer.flash.swf",
      html5player: "https://<your_CDN_ID>.cloudfront.net/assets/jwplayer.html5.js",
      primary: 'html5',
      sources: [
          { file: 'https://<your_CDN_ID>.cloudfront.net/static/videos/<video>.mp4' },
          { file: 'https://<your_CDN_ID>.cloudfront.net/static/videos/<video>.webm' }
      ]
  });

  var tag;

  jwplayer().onReady(function(){
    if (jwplayer().getRenderingMode() == "flash") {
      return;
    }

    tag = document.querySelector('video');
    tag.defaultPlaybackRate = 1.0;
    tag.playbackRate = 1.0;

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/25.png", "", function(){
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 0.25;
    },"025");

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/05.png", "", function(){
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 0.5;
    },"05");

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/1.png", "", function() {
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 1.0;
    },"1");

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/125.png", "", function() {
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 1.25;
    },"125");

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/15.png", "", function() {
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 1.5;
    },"15");

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/2.png", "", function() {
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 2.0;
    },"2");

  });

</script>

不是像 Ethan 的优秀博客文章那样进行切换，而是使用速度按钮。

只需设置自定义速度：

document.querySelector('video').playbackRate=0.80;

Answer 3

https://developer.jwplayer.com/jw-player/demos/advanced/set-playback-rate/

仅在 .setup() 中添加行playbackRateControls

jwplayer('user-player').setup({
playlist: 'https://cdn.jwplayer.com/v2/media/gaCRFWjn',
  // Set the available playback rates of your choice
  playbackRateControls: [0.75, 1, 1.25, 1.5]
});