使用HTML5視頻元素反向播放視頻

我正在研究以下功能 - 一旦加載視頻/點擊按鈕，它必須反向播放。目標設備是智能手機和平板電腦設備。我正在嘗試使用HTML5標記並閱讀playBackRate屬性。再往下，我使用HTML5的東西來使用Phonegap生成我的移動應用程序。使用HTML5視頻元素反向播放視頻

這是我覺得有趣，但部分工作的鏈接 - http://www.w3.org/2010/05/video/mediaevents.html

的playbackrate，改變的時候沒有做任何事情，除了它推回視頻以任何號碼給那裏。

我讀過它here當playBackRate設置爲-1時，應該發生反向回放。

我不清楚如何正確實現這一點。 playbackrate實際上是否做這種逆轉？或者我應該選擇做其他事情？

NEW LINE HERE：我幾乎在那裏..找到一個工作示例here。但是，當我在我的系統上嘗試時，這不起作用。我不確定我在哪裏做錯了。

來源

2013-08-05 Lohith Korupolu

請幫忙嗎？我非常需要此功能 –

該鏈接適用於最新的Chrome瀏覽器。你使用的是什麼瀏覽器？你的意思是它不適用於你的android/cordova應用程序？ – MBillau

@MBillau - 感謝您的回覆。是的，我在Google Chrome上嘗試過。它的版本是「版本28.0.1500.95米」。而且，你有沒有嘗試過使用android/cordova？ –

這是一箇舊的線程，所以我不知道以下將會有多大用處。

的Mozilla developer notes指出的是：

負值[爲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); 
}

鍍鉻處理這個相當完美，甚至播放音頻的片斷，因爲它去。

其次，我認爲你想在頁面加載後立即反向播放視頻。我無法想象這是一個用例，但我看到的第一個問題是整個視頻需要在播放之前下載，所以您需要等待 - 但下載可能不會發生，直到您開始播放。因此，您可以將currentTime設置爲接近結尾並等待canPlay事件，然後開始反向播放。即使這樣，這看起來很尷尬。

我想有這些大的選擇：

1）使用本地視頻窗口小部件，而不是HTML。我猜（沒有檢查）本機API支持反向播放。

2）生成一個正確的反轉視頻，並照常播放。例如，在某個服務器上使用諸如fmpeg之類的程序來反轉視頻。然後你的應用程序下載視頻並正常播放，這看起來像用戶反向。

假設一個應用程序在加載時反向播放視頻確實有意義，那麼我會親自去＃2。

來源

2014-07-05 15:28:19

只是爲了增加這個答案，有些人可能會像我一樣進行瘋狂的追逐。提供的功能（和小提琴）運作良好，知道您的視頻FPS（每秒幀數）也必須平滑。在大多數情況下，30fps和plus。當然，這並不意味着當你嘗試使用更小的fps時它不起作用，儘管它可能看起來像 – Amjo

使用HTML5視頻元素反向播放視頻

回答

相關問題