如何在HTML5画布上自动播放短视频剪辑

How to automatically play a short video clip on HTML5 canvas?

本文关键字：自动播放 视频 HTML5      更新时间：2023-09-26

我用画布制作了一个简单的游戏，但我似乎不知道如何在画布中快速播放一次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>

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

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>

我的建议，使用你的youtube视频是：

  • 使用youtube api
  • 仅参考您的视频ID
  • 切换可见性
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>
相关文章：