播放使用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.
我读<一href="http://stackoverflow.com/questions/5277293/is-it-possible-to-play-html5-video-in-reverse">here当 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.
的<一个href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/HTML5_playbackRate_explained"相对=nofollow> Mozilla开发说明指出的是：
负值[为playbackRate]目前不向后播放媒体。
Negative values [for playbackRate] don't currently play the media backwards.
也是一样的浏览器，但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:
不过，虽然这工作正常，我用Chrome浏览器/火狐/ 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屋！
