Internet Explorer 9 在画布 HTML5 上绘制视频的问题答案

【问题标题】：Internet explorer 9 problems with drawing video on canvs HTML5Internet Explorer 9 在画布 HTML5 上绘制视频的问题
【发布时间】：2011-10-28 12:50:36
【问题描述】：

我正在画布上绘制视频，它适用于歌剧、Mozilla 和 chrome，但在 IE9 中画布是空白的，但正在播放视频。这是我正在使用的 javascript：code

感谢您的帮助

【问题讨论】：

你的视频是什么格式的？您在 F12 脚本控制台中看到了哪些异常（如果有）？
错误：无法获取属性“暂停”的值：对象为空或未定义
我的视频是 mp4 和 ogg 格式。视频在 IE9 中可以正常播放，只是画布是空白的。
好的，我解决了“暂停”问题。现在我得到：“SCRIPT5007：无法获取属性'drawImage'的值：对象为空或未定义”对我来说，看起来问题可能与上下文有关。错误在这一行："c.drawImage(v, 0, 0, w, h);"

标签： html canvas internet-explorer-9 html5-video

【解决方案1】：

您可能应该同步 playing 事件而不是 play 事件。如果您尝试在加载任何帧之前访问视频，您将获得一个空引用。 请求播放时触发播放事件。播放实际开始时触发播放事件。

您可能还希望将 getContext 调用移至调整画布大小之后。

【讨论】：

谢谢我解决了问题
但是你是怎么解决这个问题的？
我避免与事件同步，我只是在 javascript 中启动视频，然后在画布上绘制它 (video.play();)

【解决方案2】：

下面的代码似乎对我有用。唯一的变化是 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);
}

【讨论】：