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

Question

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

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

的playbackrate,当改变除了它推回视频,通过任何数字给出有没有做任何事情.

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

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

NEW LINE HERE:我快到了......在这里找到了一个有效的例子.但是当我在我的系统上尝试它时,这不起作用.我不确定我在哪里做错了.

Answer 1

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

在Mozilla开发笔记指出:

负值[for 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可以非常无缝地处理这个问题,甚至可以播放音频片段.

其次,我认为你想在页面加载后反向播放视频.我无法想象这是一个用例,但我看到的第一个问题是整个视频需要在播放之前下载,所以你需要等待 - 但是下载可能不会发生,直到你开始播放.所以你可以设置currentTime为接近结束并等待canPlay事件,然后开始反向播放.即便如此,这似乎很尴尬.

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

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

2)生成正确的反转视频并正常播放.例如,在某个服务器上使用一个程序fmpeg来反转视频.然后你的应用程序下载视频并正常播放,向用户看起来像反向.

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