如何在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
第二个警报显示未定义
第三个警报显示“source”
第四个警报显示为1

我能够捕获div，但无法在jquery中更改播放速率!!!

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

根据上面的链接，我也尝试了javascript，并使用以下代码成功：

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

但如果我使用以上代码，如何在多个视频中使用它，因为上述 JavaScript 中没有涉及到 ID [没有传递唯一的 ID]。

以下是 jwplayer 的 div 结构：

- Hitesh

Answer 1

我已经找到了解决方法，我遇到的主要问题是如何使多个视频变得独一无二。我只需要首先通过ID获取div，然后获取'Video'标记，然后更改播放速率，添加下面的代码：

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)

我甚至尝试了多个视频，它都运行良好。

- Hitesh

---

如果只有一个，您可以执行 video_speed = document.getElementsByTagName('video')[0]。 - mrgnw

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;

- andylukem

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]
});

- Adolfo Augusto Rodrigues

---

它是一个新功能，之前不可用。感谢您的回答。 - Hitesh

好的，已添加，谢谢。 - Adolfo Augusto Rodrigues

Answer 4

只需为您的视频添加ID，然后使用document.getElementsById（id）而不是document.getElementsByTagName。

document.getElementsById('yourid').playbackRate=0.2

- Iansen

---

嗨，谢谢。但是jwplayer是动态生成视频标签并且在视频标签中没有任何ID，我只是用jQuery find来捕捉视频标签并尝试更改播放速率，但并没有起作用。 - Hitesh

使用您控制的视频父标签ID，例如document.getElementsById('my-video').getElementsByTagName('video')[0].playbackRate=0.2。 - Iansen

基本上，您需要为所有视频创建具有不同ID的容器...然后选择它们..并从它们的子元素中选择视频标签。 - Iansen

Answer 5

顺便说一下，我写了一篇关于如何在JW Player中实现这个的博客文章。它可能会有所帮助！- http://www.longtailvideo.com/blog/33860/slow-motion-with-jw-player

- emaxsaun

---

我的主要问题是声音方面，我想要使声音和视频慢放，但您的插件不支持慢速声音，这就是为什么我没有选择它的原因，但是您的插件在慢动作方面表现得非常出色 :) - Hitesh

实际上这取决于浏览器。例如，在Opera中演示时，声音会相当慢 ;) - emaxsaun

@ethan-jwplayer 这个播放器也可以加速播放速度吗？（在我投入大量时间之前，哈哈） - GDP

是的，请发送电子邮件给我以获取演示 - ethan [at] jwplayer [dot] com，谢谢。 - emaxsaun