在Chrome Mobile的html5畫布上使用隱形視頻標籤繪製視頻幀

Question

我在Android（Chrome for Android）上的HTML5視頻和畫布上遇到問題。我從視頻畫布畫框（使用CanvasRenderingContext2D.drawImage（））。它適用於桌面瀏覽器，但不適用於Android版Chrome。在Android版Chrome中，只有在視頻元素可見的情況下才能使用。我的意思是它真的可見：即使元素可見屬性但由於頁面滾動不可見 - 它不起作用。

此示例http://html5demos.com/video-canvas僅在移動設備視口顯示至少1個視頻元素像素的情況下有效。如果視頻元素完全隱藏 - 畫布不更新。

所以，我正在尋找解決方法。視頻元素不可見時如何更新畫布？

Answer 1

試試你的視頻元素上設置這些CSS樣式：無論

position: fixed; 
top: 0; 
left: 0; 
opacity: 0; 

這樣，它永遠是「看得見」的頁面，滾動的，它不會佔用任何空間，但你只是不會看到它。

這聽起來像一個錯誤，或者至少是一個非標準的行爲，所以將不透明度設置爲0可能無法正常工作。你可以嘗試將不透明度設置爲0.05等非常低的值，這可能不是那麼糟糕，特別是如果它只有1x1像素。