Прозрачность WebM to Canvas - PullRequest
Новая
       51

Прозрачность WebM to Canvas

0 голосов
/ 02 декабря 2018

Моя первоначальная проблема состоит в том, что у меня есть 3 видеофайла, которые мне нужно воспроизвести без пропусков или наложений, что с проблемами видимости и непрозрачности имеет эти проблемы.

Моя новая идея состояла в том, чтобы записать все на холст, нопрозрачность, кажется, испортилась.

Я пробовал как предварительно умноженную альфа, так и прямую.

Видеотег отлично с ними справляется. 

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 / 60); // drawing at 30fps
    }
  })();
}, 0);
<div id="theater">
<video width="auto" controls="false" height="auto" autoplay="true" id="video" class="stack">
  <source src="http://njastad.com/telenorligaen/straight.webm" type="video/webm">
</video>
  <canvas id="canvas"></canvas>
  <label>
    <br />Try to play me :)</label>
  <br />
</div>

Есть идеи?

1 Ответ

0 голосов
/ 02 декабря 2018

Не важно, я просто забыл очистить холст между кадрами ...

...