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

Posted 2023-05-08

【中文标题】使用 HTML5 视频元素反向播放视频

【英文标题】：play a video in reverse using HTML5 video element

【发布时间】：2013-08-05 20:53:59

【问题描述】：

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

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

playbackrate 更改后不会执行任何操作，只会将视频推回，无论那里给出什么数字。

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

我不清楚如何准确地实现这一点。 playbackrate 是否真的做到了这一点？还是我应该选择做其他事情？

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

【问题讨论】：

这里有什么帮助吗？我非常需要这个功能

该链接适用于我最新的 Chrome。你使用的是什么浏览器？你的意思是它不能在你的 android/cordova 应用上运行吗？

@MBillau - 感谢您的回复。是的，我在谷歌浏览器上试过。它的版本是“版本 28.0.1500.95 m”。而且，你试过用 android/cordova 吗？

嗨，不，我还没有在 android cordova 上进行更改，但希望今天能够对其进行测试。我有点担心，因为 Cordova Android 使用“旧”浏览器（WebView），该浏览器在一些花哨的东西上存在已知限制（请参阅本网站上人们对一些更高级的浏览器功能有问题。）也许这是其中之一限制，但我不确定。

@MBillau - 我的 jsfiddle 示例在我的浏览器和 android 设备上运行（使用 cordova）。但是反向播放有点扭曲。它不光滑。另外，屏幕加载时是否有机会直接反向播放我的视频？此时，我们只能在视频播放一段时间（几秒钟）后进行快退/倒退。

【参考方案1】：

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

Mozilla developer notes 指出：

[forplaybackRate] 的负值当前不向后播放媒体。

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 可以非常无缝地处理这个问题，甚至可以播放音频的 sn-ps。

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

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

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

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

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

【讨论】：

只是为了补充这个答案，有些人可能会像我一样疯狂追逐。提供的功能（和小提琴）运行良好，知道您的视频 FPS（每秒帧数）也必须平滑。在大多数情况下，30fps 及以上。当然，这并不意味着当你在较小的 fps 上尝试它时它不起作用，尽管它可能看起来像它