Internet Explorer 9 проблем с рисованием видео на холстах HTML5 - PullRequest
Новая
       29

Internet Explorer 9 проблем с рисованием видео на холстах HTML5

2 голосов
/ 17 августа 2011

Я рисую видео на холсте, и оно работает в опере, Mozilla и Chrome, но в IE9 холст пустой, но видео воспроизводится. Вот JavaScript, который я использую: код

Спасибо за вашу помощь

Ответы [ 2 ]

0 голосов
/ 08 сентября 2012

Код ниже, кажется, работает для меня.Единственное изменение - вызов функции setTimeout должен иметь оболочку для правильной передачи параметров в IE.Демонстрации в http://html5doctor.com/video-canvas-magic/, кажется, прекрасно работают с этим изменением. 

document.addEventListener('DOMContentLoaded', function () {
    var v = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var cw = Math.floor(canvas.clientWidth);
    var ch = Math.floor(canvas.clientHeight);
    canvas.width = cw;
    canvas.height = ch;

    v.addEventListener('play', function () {
        draw(this, context, cw, ch);
    }, false);

}, false);

function draw(v, c, w, h) {
    if (v.paused || v.ended) return false;
    c.drawImage(v, 0, 0, w, h);
    setTimeout(function(){ draw(v, c, w, h) }, 20);
}​
0 голосов
/ 19 августа 2011

Вам, вероятно, следует синхронизировать событие playing , а не событие play .Если вы попытаетесь получить доступ к видео до загрузки каких-либо кадров, вы получите нулевую ссылку.Событие воспроизведения срабатывает, когда запрашивается .Событие воспроизведения срабатывает, когда фактически начинается воспроизведение.

Вы также можете переместить вызов getContext на AFTER, где вы изменили размер холста.

...