javascript - 如何在 HTML5 canvas 上自动播放视频短片？

Question

我使用 Canvas 制作了一个简单的游戏，但我似乎无法弄清楚如何在我的 Canvas 中(在绘制 Canvas 之前)获得一个快速的 3 秒介绍来玩一次。

这是我的 html:

<video id="intro" src="https://www.youtube.com/watch?v=tqErAlg-QJU" controls="false" autoplay></video>

<canvas id="myCanvas" width="800" height="400"

style="border:1px solid #000000;">

</canvas>

Answer 1

这里有一个示例，只需处理播放事件，这样当视频自动播放运行时， Canvas 会绘制该视频的副本。

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

    v.addEventListener('play', function(){
        draw(this,context,canvas.width,canvas.height);
    },false);

},false);

function draw(v,c,w,h) {
    if(v.paused || v.ended) return false;
    c.drawImage(v,0,0,w,h);
    setTimeout(draw,20,v,c,w,h);
}

#intro{
  position:absolute;
  visibility:hidden  
}

<video id="intro" height="200" src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" controls="false" autoplay></video>

<canvas id="myCanvas"

style="border:1px solid #000000;">

</canvas>