如何提高同时播放的多个相同视频标签的性能答案

【问题标题】：How to improve performance on multiple identical video tags that play simultaneously如何提高同时播放的多个相同视频标签的性能
【发布时间】：2019-02-13 13:23:58
【问题描述】：

我正在做一个小项目，我正在使用带有 alpha 的 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-2mb webm 源，它只能在本地运行，并且只能在 chromium/chrome 中运行。

我想知道是否有一种方法来“实例化”视频，就像通常在游戏中使用几何一样。

我想可以解码一次，然后使用画布多次渲染相同的视频，但现在我正在寻找非画布解决方案。如果有这样的事情。

我已经尝试过预加载视频，希望缓存它可以提高性能

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

但这并没有真正改变任何事情。

【问题讨论】：

标签： html css performance video optimization

【解决方案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>

【讨论】：