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

I have made a simple game using canvas, but I can't seem to figure out how to get a quick 3 second intro to play just once within my canvas (before canvas is drawn).

我用帆布制作了一个简单的游戏,但我似乎无法弄清楚如何在我的画布中画一次快速的3秒钟介绍(在绘制画布之前)。

This is what I've got for my html:

这就是我的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>

2 个解决方案

#1

Here you have an example, just handle the play event so when the video autoplay run, the canvas draw a copy of that video.

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

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>

#2

My proposal, using your youtube video is:

我的提议,使用您的YouTube视频是:

use youtube api

使用youtube api

refer only to your videoId

仅参考您的videoId

toggle visibility

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>

#1