我正在尝试使用画布drawImage
方法与视频源,但它不适用于Android 4.4.2,用Chrome浏览器测试。
这是我的代码:
$(function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var video = document.getElementById('video');
var videoWidth;
var videoHeight;
var paused = false;
canvas.addEventListener('click', function() {
if (paused) {
video.play();
} else {
video.pause();
}
paused = !paused;
});
video.addEventListener("loadedmetadata", function() {
videoWidth = this.videoWidth || this.width;
videoHeight = this.videoHeight || this.height;
canvas.width = videoWidth;
canvas.height = videoHeight;
}, false);
video.addEventListener('play', function() {
var $this = this; // cache
(function loop() {
if ( ! $this.paused && ! $this.ended ) {
drawImage($this);
requestAnimationFrame(loop);
// setTimeout(loop, 1000 / 25); // drawing at 25 fps
}
})();
}, 0);
function drawImage(frame) {
ctx.drawImage(frame, 0, 0);
// ctx.clearRect ( 0 , 0 , canvas.width, canvas.height );
}
});
Fiddle: http://jsfiddle.net/h1hjp0Lp/
有没有办法让它同时适用于 Android 和 iOS 设备?
这似乎是特定文件格式的问题(mp4
).
替换为webm
文件并且工作正常。
不幸的是,但这就是<video>
有一段时间(真正需要 webm/ogg 而不仅仅是 mp4,无论浏览器声称支持什么)。
(我敢打赌这是一个与反 DRM 截图相关的错误?谁知道)
例如使用源http://video.webmfiles.org/big-buck-bunny_trailer.webm
它会起作用:http://jsfiddle.net/h1hjp0Lp/15/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)