6

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

3 回答 3

7

样品小提琴

就倒带而言，播放速率选项似乎没有完整的浏览器支持。您可以通过使用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);
});

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

于 2013-04-16T21:02:27.307 回答
1

  • 确保在受支持的浏览器中进行测试。我只发现它可以在 IE10 上运行（虽然它很草率）

  • 尝试在 IE9 中设置负值会导致视频暂停（将其设置为 0）

  • 根据 w3schools，它应该可以在 chrome 中工作，但我在那里没有运气

  • 也应该在 Safari 上工作，虽然我没有测试过

    例子

于 2013-04-16T20:43:00.097 回答
1

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

当元素具有当前媒体控制器时，将忽略playbackRate 属性，而使用当前媒体控制器的playbackRate。

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

使用这个 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/

于 2013-04-16T20:52:49.030 回答