HTML5 Canvas drawImage с источником видео не работает на Android
Я пытаюсь использовать canvas 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 );
}
});
Скрипка: http://jsfiddle.net/h1hjp0Lp/
есть ли способ заставить его работать с устройствами Android и iOS?
3 ответов
кажется, это проблема с этим конкретным форматом файла (mp4
).
заменить webm
файл, и он работает нормально.
к сожалению, но это был путь <video>
на некоторое время (действительно требуется webm/ogg, а не только mp4, независимо от того, какие браузеры утверждают, что поддерживают).
(Я уверен, что это ошибка, связанная с анти-drm скриншот вещи? кто знает)
например, используйте источник http://video.webmfiles.org/big-buck-bunny_trailer.webm
и оно будет работать: http://jsfiddle.net/h1hjp0Lp/15/
Я запускаю Chrome 43.0.2357.93 на Android 5.0.1, и drawImage не работает для mp4 или webm.
похоже, что Chrome неправильно захватывает данные кадра из тега видео. Когда я вызываю getImageData и проверяю результирующий объект imageData, значения RGBA устанавливаются в 0.
для HUAWEI GRA-TL00 с Android 5.0.1,drawImage
не работает mp4 или webm.
обратитесь к crestejs видео растрового изображения.
Ссылки: