Question

我用帆布制作了一个简单的游戏，但我似乎无法弄清楚如何在我的画布中画一次快速的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

这里有一个例子，只是处理播放事件，所以当视频自动播放运行时，画布会绘制该视频的副本。

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>

Answer 2

我的提议，使用您的YouTube视频：

使用youtube api
仅指您的videoId
切换可见性

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '400',
    width: '800',
    videoId: 'tqErAlg-QJU',
    events: {
      'onReady': function (e) {
        e.target.playVideo();
        // pause video after 3 seconds
        setTimeout(function() {
          player.pauseVideo();
        }, 3 * 1000);
      },
      'onStateChange': function (e) {
        // if video ended (0) or paused (2)....
        if (e.data == 0 || e.data == 2) {
          // remove the player
          player.destroy();
          // toggle the visibility
          $('#myCanvas, #player').toggle();
        }
      }
    }
  });
}
$(function () {
  $('#myCanvas').hide();
});

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>

<div id="player"></div>
<canvas id="myCanvas" width="800" height="400" style="border:1px solid #000000;"></canvas>

如何在HTML5画布上自动播放短视频片段？

2 个答案: