在HTML畫布上繪製的視頻僅在Chrome中播放，即使使用webm

我正在將畫面繪製到畫布上，然後使用混合模式在其上繪製另一個圖像。到目前爲止，我的視頻在Chrome瀏覽器上運行，但不支持Firefox或Safari瀏覽器。當我用Firefox打開時，我看到混合畫布一秒鐘，然後消失。當我在Safari瀏覽器中顯示頂部圖像（這是一張臉）在HTML畫布上繪製的視頻僅在Chrome中播放，即使使用webm

我有一個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(); 
});

來源

2014-06-16 Chris G-Jones

您必須爲不同的瀏覽器提供不同的視頻編碼：https：//developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats。 – markE

是的，我有一個webm，當它只是html時，我甚至可以在網站上播放視頻。當我將圖像數據傳輸到畫布時，問題似乎就會出現。 –

我想你指的setInterval，而不是setTimeout的。但無論如何，最好使用requestAnimationFrame。

來源

2014-06-24 15:00:33

好的，謝謝，我從來沒有使用requestAnimationFrame之前，我真的不知道如何實現它與我有什麼，但謝謝我會放棄！ –

在HTML畫布上繪製的視頻僅在Chrome中播放，即使使用webm

回答

相關問題