HTML5：手動「打」畫布裏面的視頻，在IOS的Safari

所以，這裏是我想要做的事：我想加載視頻到視頻元素，但又不希望它在「正常發揮「辦法。使用按照電影的幀率計算的定時間隔，我希望在每次迭代中都可以使用HTML5：手動「打」畫布裏面的視頻，在IOS的Safari

A.手動將視頻提前一幀（或儘可能接近該幀）。
B.將該幀繪製到畫布上。

從而具有視頻「玩」畫布裏面。

下面是一些代碼：

<video width="400" height="224" id="mainVideo" src="urltovideo.mp4" type="video/mp4"></video> 
<canvas width="400" height="224" id="videoCanvas"></canvas> 

<script type="text/javascript"> 

var videoDom = document.querySelector("#mainVideo"); 
var videoCanvas = document.querySelector("#videoCanvas"); 
var videoCtx = null; 
var interval = null; 

videoDom.addEventListener('canplay',function() { 
    // The video's framerate is 24fps, so we should move one frame each 1000/24=41.66 ms 
    interval = setInterval(function() { doVideoCanvas(); }, 41.66); 
}); 

videoDom.addEventListener('loadeddata',function() { 
    videoCtx = videoCanvas.getContext('2d'); 
}); 

function doVideoCanvas() { 
    videoCtx.drawImage(videoDom,0,0); 
    //AFAIK and seen, currentTime is in seconds 
    videoDom.currentTime += 0.0416; 
} 

</script>

這工作完全在谷歌瀏覽器，但它並沒有在iPhone的Safari工作;
視頻幀沒有得到根本在畫布上繪製。

我確信：

我勾搭成不被觸發視頻事件（做「警報」，他們被證明）。
我有在畫布上控制（做了一個「fillRect」，它填補）。

[我也試過在指定的drawImage尺寸 - 這並沒有幫助]
是drawImage與視頻對象並不適用於所有的iPhone Safari瀏覽器...？

即使我會設法找到一種方法來捕捉視頻幀，也有在iPhone的瀏覽器的一些其他問題：

到視頻的currentTime屬性訪問僅授予一旦視頻開始播放（以標準方式）。我想也許以某種方式「隱藏起來」，然後捕捉，但沒有設法做到這一點。也想到可能以某種方式開始播放視頻，然後立即停止播放;
似乎有不被任何方式強行啓動的IOS Safari瀏覽器的視頻的播放。 video.play()或autoplay似乎沒有做任何事情。只有當用戶點擊視頻上的「播放圈」時，視頻纔會開始播放（通常在iPhone的瀏覽器上播放視頻）。
一旦視頻播放 - currentTime屬性確實得到轉發。在視頻本身。當您暫停視頻並返回到正常的html頁面時 - 您可以看到視頻元素上的幀發生變化。雖然，在一個緩慢的階段（不像谷歌瀏覽器，在速度似乎不夠順暢，使它看起來像它的播放） - 它看起來是像每秒2-3幀也許率的iphone。即使我嘗試更改間隔時間，它仍然保持不變，我猜iPhone上的瀏覽器可以處理的最小時間限制。

「獎金問題」 :) - 當視頻元素的幀從事件的進展 - 圓「播放按鈕」是可見的視頻元素的（因爲它實際上不是「玩」）。無論如何要隱藏它並使之看不見？

這已經在Iphone 3GS（同時使用3G和Wifi）和Iphone 4上測試，兩者均運行IOS 5，兩者的結果都與上述相同。

來源

2012-05-30 Yuval A.

不幸的是，我沒有iOS設備來測試這個，但我不認爲你需要以你試圖使用currentTime屬性的方式實際捕獲視頻幀。通常的過程看起來是這樣的：

創建一個視頻元素，不受管制（省略controls屬性）
隱藏元素
當播放視頻時它畫到畫布上的間隔

正如您發現的那樣，iOS設備不支持在HTML5視頻（或者確實是音頻）上自動播放，但您可以創建一個單獨的控件以使用play()方法啓動視頻播放。

這種方法應該可以解決您使用播放按鈕的問題，因爲在這種情況下您實際上正在播放視頻。

來源

2012-05-30 09:57:43

感謝您的回覆和提示！我遇到以下文檔：http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html 其中有一行聲明：「注意：視頻作爲畫布drawImage（）方法的來源目前在iOS上不受支持。「：\ 但另一種選擇是將視頻轉換爲圖像序列 - 並將其用於畫布上！ –

很好找Yuval，知道這真的很有用。您應該添加這是您的問題的答案並接受它。 –

類似的功能目前似乎在Android Chrome和Android Browser中也不足。 – Falcon

HTML5：手動「打」畫布裏面的視頻，在IOS的Safari

回答

相關問題