这是一个旧的帖子,所以我不确定以下内容会有多大用处。
Mozilla 开发者笔记 指出:
负值 [playbackRate] 目前不会使媒体向后播放。
Chrome 也一样,但 Mac 上的 Safari 可以。
这个来自 w3c 的页面非常适用于观察和理解事件:
http://www.w3.org/2010/05/video/mediaevents.html
我采用了你提到的 jsfiddle 并添加了一些额外的控件来快速前进/倒回:
http://jsfiddle.net/uvLgbqoa/
然而,虽然这在 Chrome/Firefox/Safari 上对我有效,但我应该指出,它并没有真正解决你的关键问题。
首先,该方法假设负播放速率不起作用(在我撰写本文时,大部分情况下似乎确实如此)。相反,它通过计算并设置视频中的当前时间来伪造它:
function rewind(rewindSpeed) {
clearInterval(intervalRewind);
var startSystemTime = new Date().getTime();
var startVideoTime = video.currentTime;
intervalRewind = setInterval(function(){
video.playbackRate = 1.0;
if(video.currentTime == 0){
clearInterval(intervalRewind);
video.pause();
} else {
var elapsed = new Date().getTime()-startSystemTime;
log.textContent='Rewind Elapsed: '+elapsed.toFixed(3);
video.currentTime = Math.max(startVideoTime - elapsed*rewindSpeed/1000.0, 0);
}
}, 30);
}
Chrome可以轻松处理这个问题,甚至在处理过程中播放音频片段。
其次,我认为你想要在页面加载时立即将视频倒放。我无法想象出这种用例,但我首先看到的问题是整个视频将需要在播放之前下载,因此您需要等待-但下载可能不会发生直到您开始播放。所以您可以将currentTime
设置为接近结尾并等待canPlay
事件,然后开始倒播。即使如此,这似乎非常笨拙。
我认为有以下几个选择:
使用本机视频小部件而不是HTML。我猜(没有检查)本机API支持反向播放。
生成适当的反向视频并正常播放。例如,在某个服务器上使用像ffmpeg
这样的程序来反转视频。然后,您的应用程序下载视频并正常播放,对用户来说就像是反向的。
假设真的有意义的是在加载视频时播放反向的应用程序,那么我个人会选择#2。