使用HTML5视频元素倒放播放视频

Question

使用HTML5视频元素倒放播放视频

javascriptandroidhtmlcordovahtml5-video

4

我正在开发以下功能- 加载视频后/按下按钮，它必须反向播放。目标设备是智能手机和平板电脑。我正在尝试使用HTML5标签，并阅读了有关playBackRate属性的内容。进一步地，我使用HTML5生成我的移动应用程序，使用Phonegap。

这是一个我找到的有趣但部分工作的链接 - http://www.w3.org/2010/05/video/mediaevents.html 当更改playbackrate时，除了将视频推回所给数字外，什么也不做。

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

我不清楚如何确切实现这一点。playbackrate是否真正执行此反转？还是我应该选择做其他事情？

新的一行在这里：我快要做到了...找到了一个可用的例子这里。但是当我尝试在我的系统上运行它时，它并没有起作用。我不确定我哪里出错了。

- Lohith Korupolu

有人可以帮忙吗？我非常需要这个功能。 - Lohith Korupolu

那个链接在我最新的Chrome浏览器上可以使用。你用的是什么浏览器？你是指它在你的Android/Cordova应用程序上无法工作吗？ - MBillau

@MBillau - 感谢您的回复。是的，我在Google Chrome上尝试过了。它的版本是“Version 28.0.1500.95 m”。另外，您有没有尝试过在Android/Cordova上使用？ - Lohith Korupolu

嗨，我还没有机会在Android Cordova上尝试它，但希望今天能够测试。我有点担心，因为Cordova Android使用一个“旧”的浏览器（WebView），它已知在一些高级功能方面存在限制（请参见此网站上出现的一些人遇到的问题）。也许这是其中的一个限制，但我不确定。 - MBillau

@MBillau - 我在我的浏览器和安卓设备上成功运行了jsfiddle的示例（使用cordova）。但是反向播放有一点失真，不够流畅。另外，有没有可能在屏幕加载时直接以倒放方式播放我的视频？目前，我们只能在视频播放一段时间后（几秒钟）才能倒带/倒放。 - Lohith Korupolu

@MBillau - 你的任何意见都可以帮助我在这方面更进一步。我想知道是否可以在屏幕加载时进行反向播放。请帮忙 :) - Lohith Korupolu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew E · Accepted Answer

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

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。