HTML5キャンバスで短いビデオクリップを自動的に再生する方法は？

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

私の提案、あなたのユーチューブ動画がある使用：

• 使用ユーチューブのAPI
• は

あなたVIDEOID

トグルの可視性のみを参照10

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>