使用 HTML5 视频元素反向播放视频 [英] play a video in reverse using HTML5 video element

问题描述

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

I am working on a functionality explained below- Once a video is loaded/with a button click, it has to play in reverse. The target devices are smart phones and tablet devices. I am trying to do this using HTML5 tag and read about the playBackRate attribute. Further down, I am using the HTML5 stuff to generate my mobile apps using Phonegap.

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

Here's a link I found interesting but partially working - http://www.w3.org/2010/05/video/mediaevents.html

playbackrate，在更改时不会做任何事情，除了将视频推回，无论那里给出的数字如何.

The playbackrate, when changed doesn't do anything except it pushes the video back, by whatever number is given there.

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

I read it here that when playBackRate is set to -1, the reverse playback should happen.

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

I am not clear on how to exactly implement this. Does the playbackrate actually do this reversing? or should I opt on doing something else?

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

NEW LINE HERE: I am almost there.. found a working example here. But this is not working when I am trying it on my system. I am not sure where I am making it wrong.

推荐答案

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

This is an old thread so I'm not sure how useful the following will be.

Mozilla 开发者说明 指出:

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

Negative values [for playbackRate] don't currently play the media backwards.

Chrome 也一样，但 Mac 上的 Safari 可以使用.

Same goes for Chrome, but Safari on Mac works.

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

This page from w3c is great at observing and understanding events:

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

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

I took the jsfiddle you mentioned and added some extra controls for fast forward/rewind speeds:

http://jsfiddle.net/uvLgbqoa/

然而，虽然这对我来说在 Chrome/Firefox/Safari 上运行良好，但我应该指出它并没有真正解决您的关键问题.

However, though this works fine for me with Chrome/Firefox/Safari, I should point out that it doesn't really address your key questions.

首先，该方法假设负播放率不起作用(在我撰写本文时，这在很大程度上是真实的 AFAICS).相反，它通过计算和设置视频中的当前时间来伪造它:

Firstly, the approach assumes that negative playback rates don't work (which at the time I write this, is largely true AFAICS). Instead, it fakes it by calculating and setting the current time in the video:

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 可以无缝地处理这个问题，甚至可以随时播放音频片段.

Chrome handles this quite seamlessly, even playing snippets of audio as it goes.

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

Secondly, I think you want to play the video in reverse as soon as the page loads. I can't imagine a use case for this, but the first issue I see is that the whole video will need to be downloaded prior to playback, so you'll need to wait - but download probably won't happen until you start playing. So you could set the currentTime to near the end and wait for the canPlay event, and then start playing in reverse. Even then, this seems very awkward.

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

I think there are these broad options:

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

1) Use a native video widget rather than HTML. I'm guessing (without checking) that the native API supports reverse playback.

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

2) Generate a proper reversed video and play it as normal. For example, on a server somewhere use a program like fmpeg to reverse the video. Then your app downloads the video and plays it normally, which looks to the user like reverse.

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

Assuming it really does make sense to have an application that plays a video in reverse when you load it, then I'd personally go for #2.

这篇关于使用 HTML5 视频元素反向播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！