Question

我正在将一个视频绘制到画布上，然后使用混合模式在其上绘制另一个图像。到目前为止，我的视频适用于Chrome，但不适用于Firefox或Safari。当我用Firefox打开时，我看到混合画布一秒钟，然后它消失了。当我查看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。

在HTML画布上绘制的视频仅在chrome中播放，即使使用webm也是如此

1 个答案: