2011-08-24 144 views
10

我試圖在iPad上反向播放HTML5視頻(視頻需要根據用戶輸入隨意切換正向和反向)。在iOS上向後播放HTML5視頻

HTML5 <video>元素包含一個名爲playbackRate的屬性,該屬性允許以更快或更慢的速率播放視頻,或反過來播放視頻。根據Apple's documentation,此屬性在iOS上不受支持。

通過設置currentTime屬性每秒多次(例如每秒10-30次更新),可以在不使用playbackRate的情況下反向播放。這種方法適用於桌面Safari,但似乎iOS設備上的搜索限制爲每秒1次更新 - 在我的情況下速度太慢。

有什麼方法可以在iOS設備(即iPad)上向後播放HTML5視頻嗎?

(我測試在iPad 2運行4.3.1)

+3

你可能會在服務器上存儲一個正常和顛倒的視頻副本,並在它們之間切換? – Mihai

+0

我也試過。雖然轉換速度比我預想的要快,但視頻下降,出現quicktime徽標等等。我需要它是一個無縫切換。 –

+0

你解決了這個問題嗎?詳細視頻的時間有多長,你可以將它切成一系列圖像,並將其拖動到畫布對象上而不是

回答

2

現在iOS 6 Safari支持playbackRate屬性。

+0

我認爲這是錯誤的,如在https://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/中提到的uid/TP40009523-CH5-DontLinkElementID_1 – joafeldmann

+0

你是對的,它在iOS 6的初始版本上工作,但隨後他們在6.0.2或其他版本上禁用了它。 – kenwarner

3

作爲米哈伊建議的,使用兩個版本和更新當用戶改變播放方向尋道位置。

將DIV中的視頻層疊在一起,當翻轉播放方向時,切換div可見性(並暫停播放被隱藏的視頻)。

所以這是時間表:

  1. 用戶點擊播放切換。
  2. 暫停顯示的視頻。
  3. Get Seek顯示視頻的位置。
  4. 從視頻持續時間中減去該值。
  5. 在未顯示的視頻中搜索此值。
  6. 切換顯示的視頻DIV。
  7. 開始播放新顯示的視頻。
+0

蘋果公司表示,「iOS設備目前不支持」並行播放多個視頻,部分重疊或完全覆蓋。「 http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW10 –

+0

所以這會不適用於iOS設備。執行雙視頻選項的唯一方法是在切換到導致顯着中斷並顯示Quicktime徽標的新視頻時卸載現有視頻。 –

+1

您也可以嘗試將正向和反向視頻合併到同一個文件中,當您向後播放時,只需移動到視頻的後部並向前播放即可。 –

0

我的建議是在您的HTML代碼中製作一個「假」視頻播放器。然後捕捉用戶使用safari/ios回調方法「播放」視頻的嘗試。然後創建一個MPMoviePlayerController實際加載視頻並將其顯示在瀏覽器中視頻的原始位置或僅支持全屏播放。 MPMediaPlayback協議支持通過currentPlaybackRate屬性進行反向播放,所以希望這應該是一個臨時解決方案,因爲我無法看到Safari版本的IOS,因爲本地播放器支持,所以最終不會實現此功能。

2

爲什麼不把反向和前向版本拼接成一個電影?

這消除了當用戶翻轉方向時卸載和加載視頻的問題。通過單一的電影方式,當用戶翻轉方向時,你所需要做的就是找出電影另一半中的對應點並尋找到那裏。

0

注:我是愚蠢的,錯過了問題的一個不平凡的一部分,所以,以下是針對iOS的目的

谷歌搜索了一會兒很沒用,我發現下面的代碼解釋上沿如何支持HTML5視頻的反向播放基於WebKit瀏覽器:

function speedup(video, direction) { 
    if (direction == undefined) direction = 1; // or -1 for reverse 
    if (video.playbackRate != undefined) { 
     video.playbackRate = direction == 1 ? 2 : -2; 
    } else { // do it manually 
     video.setAttribute('data-playbackRate', setInterval ((function playbackRate() { 
     video.currentTime += direction; 
     return playbackRate; // allows us to run the function once and setInterval 
     })(), 500)); 
    } 
} 

function playnormal(video) { 
    if (video.playbackRate != undefined) { 
     video.playbackRate = 1; 
    } else { // do it manually clearInterval(video.getAttribute('data-playbackRate’)); } 
} 

來源:http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/

您需要在HTML5視頻對象傳遞給SPEE dup函數,但隨後又是功能可能被還原成以下(我沒有測試此然而,這是一個iPad特定功能):

function reverseVideo(video) { 
    video.playbackRate = -1; 
} 

隨意玩耍,並尋找更多的信息,在html5視頻元素上:)

+0

啊該死的,我很抱歉,我太累了..我會在幾分鐘內更新我的答案,完全錯過了iOS部分不支持。 :( –