javascript - 在 HTML canvas 上绘制的视频只能在 chrome 中播放，即使使用 webm

Question

我正在将视频绘制到 Canvas 上，然后使用混合模式在其上绘制另一幅图像。到目前为止，我的视频适用于 chrome，但不适用于 firefox 或 safari。当我用 Firefox 打开时，我会看到混合 Canvas 一秒钟，然后它就消失了。当我在 safari 中查看时，它显示顶部图像(这是一张脸)

我有一个 mp4 和一个 webm 视频上传到我的网站，当我检查代码并显示视频时，我可以看到它实际上是在 firefox 中播放，这令人困惑，因为它就像找到了图像和视频数据？

我需要做些什么才能让视频在所有浏览器上播放吗？

下面是我正在使用的代码，这里是网站的链接(目前只能在 chrome 中正常工作)- http://chrisgjones.com/category/double-exposure/

    var img1 = document.getElementById('img1'),
    bg = document.getElementById('img2'),
    canvas = document.getElementById("canvas"),
    video  = document.getElementById('video');
    context = canvas.getContext("2d"),
    blendMode = "multiply";

context.globalCompositeOperation = "source-over";   // dont apply blending to bg image

video.addEventListener('play', function () {
    var $this = this; //cache
    (function loop() {
        if (!$this.paused && !$this.ended) {
            context.drawImage($this, 0, 0, canvas.width, canvas.height);
            setTimeout(loop, 1000 / 30); // drawing at 30fps
            context.globalCompositeOperation = blendMode;
            context.drawImage(img1, 0, 0, canvas.width, canvas.height);  
        }
    })();
}, 0);

$(window).load(function(){
    video.play();
});

Answer 1

我猜你指的是 setInterval 而不是 setTimeout。但无论如何，最好使用 requestAnimationFrame。