jQuery，为什么倒带播放率不起作用？答案

【问题标题】：jQuery, why the rewind playbackRate doesn't work?jQuery，为什么倒带播放率不起作用？
【发布时间】：2013-04-09 09:00:49
【问题描述】：

我的快进播放速度工作正常。现在我尝试使用负数的倒带部分，但它不起作用。 w3school 说要使用负数来倒带。 http://www.w3schools.com/tags/av_prop_playbackrate.asp 谁能告诉我我做错了什么？

这是我的 javascript 工作代码，用于快进，

$("#speed").click(function() { // button function for 3x fast speed forward
    video.playbackRate = 3.0;
});

那么这里不成功倒带代码，

$("#negative").click(function() { // button function for rewind
    video.playbackRate = -3.0;
});

【问题讨论】：

旁注：不要使用 w3schools...read this.
我很惊讶 w3schools 不好。现在我将不得不责怪我的大学强迫我使用 w3schools 方式。

标签： javascript jquery html html5-video

【解决方案1】：

Sample Fiddle

就倒带而言，播放速率选项似乎没有complete browser support。您可以通过使用setinterval 并减去视频的currentTime 来伪造它。

var video = document.getElementById('video');
var intervalRewind;
$(video).on('play',function(){
    video.playbackRate = 1.0;
    clearInterval(intervalRewind);
});
$(video).on('pause',function(){
    video.playbackRate = 1.0;
    clearInterval(intervalRewind);
});
$("#speed").click(function() { // button function for 3x fast speed forward
    video.playbackRate = 3.0;
});
$("#negative").click(function() { // button function for rewind
   intervalRewind = setInterval(function(){
       video.playbackRate = 1.0;
       if(video.currentTime == 0){
           clearInterval(intervalRewind);
           video.pause();
       }
       else{
           video.currentTime += -.1;
       }
            },30);
});

我还为播放和暂停按钮添加了一些额外的侦听器以清除间隔。可能还想考虑在快进和快退按钮上做一些切换功能。

【讨论】：

它工作正常，但你怎么知道倒带是否可以匹配快进回放率 3.0 的速度？
@StudentIT 玩弄间隔延迟，直到您获得与快进相同的倒带感觉。我觉得 30 已经很接近了。
所以如果我有 1.5 而不是 3.0。 30 将不得不改变，但不理会 -.1？

【解决方案2】：

这是w3school.com 提供虚假信息的又一个例子。他们忘了指出：

当元素有当前媒体控制器时，playbackRate 属性被忽略并且当前媒体控制器的playbackRate

来源：http://www.w3.org/TR/html5/embedded-content-0.html#playing-the-media-resource

在使用this demo 进行一些测试后，事实证明，当媒体控制器存在时，playbackRate 必须大于或等于0。如果video.playbackRate < 0，它根本不会播放。

这意味着当媒体控制器存在时，您不能使用playbackRate“倒带”。但是，您可以通过执行以下操作来倒带视频：

var _el = document.getElementById("video"); 
_el.currentTime -= 5;

演示： http://jsfiddle.net/dirtyd77/sZVAq/3/

或

<button onclick='video.currentTime-=5'>Rewind</button>

演示： http://jsfiddle.net/dirtyd77/sZVAq/2/

【讨论】：

这是快退倒带，我要的是帧率快退，而不是快退倒退。

【解决方案3】：

确保在受支持的浏览器中进行测试。我只发现它可以在 IE10 上运行（虽然它很草率）
尝试在IE9 causes the video to pause 中设置负值（设置为0）
根据 w3schools，它应该可以在 chrome 中工作，但我没有运气
应该也可以在 Safari 上运行，虽然我还没有测试过

example

【讨论】：

这应该是一条评论，因为它没有回答问题。
@Dom 还不能对问题发表评论.. 没有足够的代表点（我认为）
它说它可以在 Chrome 上运行，但我对其进行了测试，但它根本不起作用。只能快进。