如何在 jwplayer 中更改播放速率答案

【问题标题】：How to change playback rate in jwplayer如何在 jwplayer 中更改播放速率
【发布时间】：2013-08-21 01:02:43
【问题描述】：

我想在 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 的形式出现
第二个警报未定义
第三个警报显示“来源”
第 4 个警报是 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结构

【问题讨论】：

标签： javascript jquery html jwplayer jwplayer6

【解决方案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)

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

【讨论】：

如果只有一个，你可以video_speed = document.getElementsByTagName('video')[0]

【解决方案2】：

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

仅在 .setup() 中添加线路播放速率控制

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

【讨论】：

它的新功能之前不可用，感谢您的回答
好的，已添加，谢谢。

【解决方案3】：

发现此脚本手动操作 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;

【讨论】：

【解决方案4】：

只需为您的视频添加 id 并使用 document.getElementsById (id) 代替 document.getElementsByTagName。

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

【讨论】：

您好，谢谢，但是 jwplayer 正在动态生成视频标签，并且在视频标签中没有任何 ID，我只是使用 jquery find 捕获视频标签并尝试更改播放率，但它不起作用
使用视频的父标签 ID（由您控制）...就像这样 document.getElementsById('my-video').getElementsByTagName('video')[0].playbackRate=0.2跨度>
基本上，您需要为所有视频创建具有不同 ID 的容器......然后选择这些容器......然后从他们的孩子中选择视频标签。

【解决方案5】：

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

【讨论】：

我主要关心的是声音，我想以慢速制作声音和视频，而您的插件不支持慢音，这就是我不使用它的原因，但您的插件非常适合慢动作： )
它实际上取决于浏览器。以Opera中的demo为例，声音会很慢;)
@ethan-jwplayer 也可以用这个来加快播放速度吗？（在我花大量时间找出之前，哈哈）
是的，请给我发电子邮件以获得演示 - ethan [at] jwplayer [dot] com，谢谢。