Canvas drawImage的html5視頻適用於瀏覽器，但不適用於Android

爲什麼此代碼可以在普通瀏覽器上運行，但顯示Android瀏覽器的相同屏幕截圖？Canvas drawImage的html5視頻適用於瀏覽器，但不適用於Android

的Html

<div class="video"> 
    <video id="video" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" muted controls autoplay></video> 
</div> 
<div class="timeline" id="timeline"></div>

的JavaScript

var timeline = document.getElementById('timeline'), 
    video = document.getElementById('video'), 
    interval = null; 

video.addEventListener("playing", onStart); 
video.addEventListener("pause", onStop); 
video.addEventListener("ended", onEnd); 

function onStart() { 
    if (interval == null) { 
     interval = window.setInterval(createImage, 1000); 
    } 
} 

function onStop() { 
    if (interval) { 
     clearInterval(interval); 
     interval = null; 
    } 
} 

function onEnd() { 
    onStop(); 
    video.removeEventListener("playing", onStart); 
    video.removeEventListener("pause", onStop); 
    video.removeEventListener("ended", onEnd); 
} 

function createImage() { 
    console.log('createImage', video.currentTime, video.videoWidth, video.videoHeight); 
    var canvas = document.createElement('canvas'), 
     ctx = canvas.getContext('2d'); 
    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); 
    timeline.appendChild(canvas); 
}

下面是完整的代碼： http://jsfiddle.net/kmturley/z99cmwtq/6/

來源

2015-09-17 Kim T

的[HTML5畫布的drawImage與視頻源不工作在Android]可能重複（http://stackoverflow.com/questions/30436576/html5-canvas-drawimage-with-video-source -not-working-on-android） – Kaiido

嗯，也許這是視頻編解碼器的問題 –

不幸的是，這個問題仍然存在於前棒棒糖設備上（<5），對於mp4和webm視頻都是如此。您是否能夠修復它/找到解決方法？ – jurer

-1

怎麼來的這對我的作品在Chrome的Android 4.4.4？

drawImage()

codepen

來源

2015-10-15 13:50:44 flieks

Canvas drawImage的html5視頻適用於瀏覽器，但不適用於Android

回答

相關問題