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

Question

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

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

更改后的playbackrate不会做任何事情，只是将视频推回，无论那里给出的数字都是多少。

我在这里读到当playBackRate设置为-1 ，应该发生反向播放。

我不清楚如何准确地实现这一点。 playbackrate实际上是否会进行这种反转？ 还是我应该选择做其他事情？

新线路在这里：我快到了..在这里找到了一个工作示例。 但是当我在我的系统上尝试它时，这不起作用。 我不确定我在哪里做错了。

Answer 1

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

Mozilla 开发者笔记指出：

负值 [for playbackRate] 当前不向后播放媒体。

Chrome 也一样，但 Mac 上的 Safari 可以工作。

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

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

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

http://jsfiddle.net/uvLgbqoa/

但是，尽管这对我使用 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 可以非常无缝地处理这个问题，甚至可以随时播放音频片段。

其次，我认为您希望在页面加载后立即反向播放视频。 我无法想象这样的用例，但我看到的第一个问题是需要在播放之前下载整个视频，因此您需要等待 - 但在您开始播放之前可能不会下载. 因此，您可以将currentTime设置为接近尾声并等待canPlay事件，然后开始反向播放。 即使这样，这看起来也很尴尬。

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

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

2) 生成适当的反转视频并正常播放。 例如，在某处的服务器上使用fmpeg类的程序来反转视频。 然后您的应用程序下载视频并正常播放，这在用户看来就像是反向播放。

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