html5視頻的Canvas drawImage可在瀏覽器上運行，但不能在Android上運行

Question

為什么此代碼在正常的瀏覽器上可以運行，但對於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/

Answer 1

在Chrome android 4.4.4中，這對我如何起作用？

drawImage()

碼筆