Как повысить производительность на нескольких идентичных видео-тегах, которые воспроизводятся одновременно

Question

Я работаю над небольшим проектом, в котором я использую webms с альфа-каналом в качестве текстур для флип-карт (используя backface-visibility: hidden и анимацию CSS)

Это код, который я использую, как только янужны анимации для запуска

var vids = document.querySelectorAll("video");
for (var i = 0; i < vids.length; i++) {
    vids[i].play();
    cards[i].classList.remove('flip');
    cards[i].classList.add('fade');
    await sleep(10);
}

Это прекрасно работает до 4-5 карт, однако я бы хотел сыграть до 13 из этих карт, так как сейчас половина видео выпадает больше всегокадров (непригодно для использования).

Все теги <video/> имеют один и тот же веб-источник 1-2 Мб, и он предназначен для работы только локально и только в хром / хром.

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

Полагаю, можно было бы декодировать это один раз, а затем использовать холст для рендеринга одного и того же видео несколько раз, носейчас я ищу решение без холста.Если есть такая вещь.

Я уже пытался предварительно загрузить видео, надеясь, что его кэширование улучшит производительность

<link rel="preload" as="video" href="vid.webm">

Но это ничего не меняет.

Answer 1

В итоге я заменил каждый «экземпляр» моего видео на холсте, производительность была звездной, хотя я рисую на отдельных холстах.Таким образом, вы можете легко запустить десятки экземпляров

Код, приведенный ниже, просто для иллюстрации, конечно, его можно написать гораздо лучше.Также, если вам нужно видео с прозрачностью, убедитесь, что вы очищаете холст каждый кадр, используя ctx.clearRect(0,0, canvas.width, canvas.height);, иначе вы будете рисовать поверх ваших предыдущих изображений.

var canvas1 = document.getElementById('canvas1');
var canvas2 = document.getElementById('canvas2');
var canvas3 = document.getElementById('canvas3');
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
var ctx3 = canvas3.getContext('2d');
var video = document.getElementById('video');

canvas1.width = 100;
canvas1.height = 100;
canvas2.width = 100;
canvas2.height = 100;
canvas3.width = 100;
canvas3.height = 100;

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

canvas {
  display: inline-block;
  float: left;
}

video {
  visibility: hidden;
}

<div id="theater">
  <video id="video" src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" controls="false" autoplay muted></video>
  <canvas id="canvas1"></canvas>
  <canvas id="canvas2"></canvas>
  <canvas id="canvas3"></canvas>
</div>