Question

我正在研究下面解释的功能 - 加载视频/点击按钮后，必须反向播放。目标设备是智能手机和平板电脑设备。我正在尝试使用HTML5标记执行此操作并阅读playBackRate属性。再往下，我使用HTML5的东西来使用Phonegap生成我的移动应用程序。

这是我发现有趣但部分工作的链接 - http://www.w3.org/2010/05/video/mediaevents.html

playbackrate，当被更改时，除了将视频推回之外没有做任何事情，无论在那里给出什么数字。

我读了here，当playBackRate设置为-1时，应该进行反向播放。

我不清楚如何准确地实现这一点。 playbackrate实际上是否实现了这种逆转？或者我应该选择做别的事情？

此处有新行：我快到了..找到了一个有效的例子here。但是当我在我的系统上尝试它时，这不起作用。我不确定我在哪里做错了。

Answer 1

这是一个旧帖子，所以我不确定以下内容会有多大用处。

Mozilla developer notes指出：

负值[对于playbackRate]目前不向后播放媒体。

Chrome也是如此，但Mac上的Safari可以运行。

w3c的这个页面非常适合观察和理解事件：

http://www.w3.org/2010/05/video/mediaevents.html

我选了你提到的jsfiddle，并为快进/快退速度添加了一些额外的控件：

http://jsfiddle.net/UkMV2/5/

然而，虽然这对我使用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可以非常无缝地处理这个问题，甚至可以播放音频片段。

其次，我想你想在页面加载后反向播放视频。我无法想象一个用例，但我看到的第一个问题是整个视频需要在播放之前下载，所以你需要等待 - 但下载可能会赢得＆＃39;直到你开始玩才会发生。因此，您可以将currentTime设置为接近结尾并等待canPlay事件，然后开始反向播放。即便如此，这似乎也很尴尬。

我认为有这些广泛的选择：

1）使用原生视频小部件而不是HTML。我猜测（没有检查）本机API支持反向播放。

2）生成正确的反转视频并正常播放。例如，在某个服务器上使用fmpeg之类的程序来反转视频。然后你的应用程序下载视频并正常播放，这样用户就像反向一样。

假设一个应用程序在加载时反向播放视频确实有意义，那么我个人会去＃2。

使用HTML5视频元素反向播放视频

1 个答案: