web-dev-qa-db-ja.com

html5：キャンバス内にビデオを表示

キャンバスの一部としてhtml5-videoを表示することは可能ですか？

基本的には、キャンバスに画像を描くのと同じ方法です。

context.drawVideo(vid, 0, 0);

ありがとう！

videohtml5canvas
38
clamp
var canvas = document.getElementById('canvas');
var ctx    = canvas.getContext('2d');
var video  = document.getElementById('video');

video.addEventListener('play', function () {
    var $this = this; //cache
    (function loop() {
        if (!$this.paused && !$this.ended) {
            ctx.drawImage($this, 0, 0);
            setTimeout(loop, 1000 / 30); // drawing at 30fps
        }
    })();
}, 0);

上記のコードは自己説明的だと思います。コメントを下に落とさないのであれば、上記の数行のコードを説明しようとします

編集：
こちらがオンラインの例です。
デモ

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var video = document.getElementById('video');

// set canvas size = video size when known
video.addEventListener('loadedmetadata', function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
});

video.addEventListener('play', function() {
  var $this = this; //cache
  (function loop() {
    if (!$this.paused && !$this.ended) {
      ctx.drawImage($this, 0, 0);
      setTimeout(loop, 1000 / 30); // drawing at 30fps
    }
  })();
}, 0);
<div id="theater">
  <video id="video" src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" controls="false"></video>
  <canvas id="canvas"></canvas>
  <label>
    <br />Try to play me :)</label>
  <br />
</div>
63
user372551

最新の構文を使用し、既に提供されているものより冗長ではないソリューションを提供したいと思います。

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const video = document.querySelector("video");

video.addEventListener('play', () => {
  function step() {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
    requestAnimationFrame(step)
  }
  requestAnimationFrame(step);
})

便利なリンク：

18
Developer Davo

CurrentTimeビデオ要素を更新してから、キャンバスにフレームを描画する必要があります。ビデオのplay（）イベントを初期化しないでください。

Exにも使用できます。このプラグイン https://github.com/tstabla/stVideo

0
Lysy