我正在研究下面解释的功能-
加载视频/单击按钮后,它必须反向播放。目标设备是智能手机和平板设备。我正在尝试使用 HTML5 标记来执行此操作并阅读有关 playBackRate
属性的信息。再往下,我使用 HTML5 的东西通过 Phonegap 生成我的移动应用程序。
这是一个我觉得很有趣但部分有效的链接 - http://www.w3.org/2010/05/video/mediaevents.html
playbackrate
在改变时除了将视频推回之外不做任何事情,无论那里给出的数字是多少。
我读了here当 playBackRate
设置为 -1
时,反向播放应该发生。
我不清楚如何准确地实现它。 playbackrate
是否确实进行了这种反转?还是我应该选择做其他事情?
此处换行: 我快到了。找到了一个工作示例 here .但是当我在我的系统上尝试时,这不起作用。我不确定我哪里做错了。
最佳答案
这是一个旧线程,所以我不确定下面的内容会有多大用处。
Negative values [for playbackRate] don't currently play the media backwards.
Chrome 也是如此,但 Mac 上的 Safari 可以。
这个来自 w3c 的页面非常擅长观察和理解事件:
http://www.w3.org/2010/05/video/mediaevents.html
我采用了您提到的 jsfiddle,并为快进/快退速度添加了一些额外的控件:
但是,虽然这对我来说适用于 Chrome/Firefox/Safari,但我应该指出它并没有真正解决您的关键问题。
首先,该方法假设负播放率不起作用(在我写这篇文章时,这在很大程度上是正确的 AFAICS)。相反,它通过计算和设置视频中的当前时间来伪造它:
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 可以非常无缝地处理这个问题,甚至可以播放音频 fragment 。
其次,我认为您想在页面加载后立即反向播放视频。我无法想象这个用例,但我看到的第一个问题是整个视频需要在播放前下载,所以你需要等待 - 但在你开始播放之前可能不会下载.因此,您可以将 currentTime
设置为接近结束并等待 canPlay
事件,然后开始反向播放。即便如此,这看起来还是很尴尬。
我认为有以下广泛的选择:
使用原生视频小部件而不是 HTML。我猜测(未检查) native API 支持反向播放。
生成正确的反转视频并正常播放。例如,在某处的服务器上使用
ffmpeg
之类的程序来反转视频。然后您的应用会下载视频并正常播放,这对用户来说就像倒转。
假设有一个在您加载视频时反向播放视频的应用程序确实有意义,那么我个人会选择 #2。
关于javascript - 使用 HTML5 视频元素反向播放视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18053261/