Question

我得到了快进的playbackRate工作正常。现在我尝试使用负数的倒带部分，但它不起作用。 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;
});

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

我还为播放和暂停按钮添加了一些额外的监听器以清除间隔。可能还希望在快速前进和后退按钮上进行一些切换功能。

Answer 2

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

example

Answer 3

这是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/

jQuery，为什么倒带playbackRate不起作用？

3 个答案: