3

我想在 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 结构jwplayer的HTML5结构

4

5 回答 5

10

我找到了答案，我面临的多个视频的主要问题是如何使每个视频独一无二。我只需要先通过 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)

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

于 2013-08-19T11:23:34.240 回答
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;
于 2016-05-24T22:22:59.343 回答
3

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]
});
于 2018-02-27T21:31:32.850 回答
2

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

document.getElementsById('yourid').playbackRate=0.2
于 2013-08-19T09:42:10.310 回答
0

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

于 2013-08-20T02:23:02.273 回答