[英]Canvas drawImage of html5 video works on browsers but not Android
Why does this code work on normal browsers, but show the same screenshot for Android browsers? 为什么此代码在正常的浏览器上可以运行,但对于Android浏览器却显示相同的屏幕截图?
Html 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 的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);
}
Here is the full code: http://jsfiddle.net/kmturley/z99cmwtq/6/ 这是完整的代码: http : //jsfiddle.net/kmturley/z99cmwtq/6/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.