javascript - 如何在不加载两次的情况下在网站上两次显示相同的 HTML 5 视频？

Question

目前我的 html 页面上有 2 个视频元素。
两者都嵌入了来自同一 URL 的完全相同的 .mp4 视频。

有没有办法告诉浏览器从第一个视频元素复制呈现的视频，而不是让浏览器下载两个视频？

您可以清楚地看到这两个视频是分开加载的，因为它们有时在播放前有不同的缓冲时间，而且视频不会每次都同步播放。

我的代码:

<video autoplay id="previewVideo" data-videoid="JYpUXXD4xgc">
    <source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>

<video autoplay id="bigVideo"     data-videoid="JYpUXXD4xgc">
    <source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>

Answer 1

这可以通过 Javascript 和 Canvas 元素通过一些非常简单的步骤完成:

HTML:

<video autoplay id="previewVideo" data-videoid="JYpUXXD4xgc">
    <source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>    
<canvas id="bigVideo"></canvas>

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  var v = document.getElementById('previewVideo');
  var canvas = document.getElementById('bigVideo');
  var context = canvas.getContext('2d');
  var cw = Math.floor(canvas.clientWidth);
  var ch = Math.floor(canvas.clientHeight);
  canvas.width = cw;
  canvas.height = ch;
  v.addEventListener('play', function() {
    updateBigVideo(this, context, cw, ch);
  }, false);
}, false);


function updateBigVideo(v, c, w, h) {
  if (v.paused || v.ended) return false;
  c.drawImage(v, 0, 0, w, h);
  setTimeout(updateBigVideo, 20, v, c, w, h);
}

Canvas 获取视频的图像并再次显示在 BigVideo 上。
updateBigVideo() 函数每 20 毫秒调用一次，从而产生大约 50 FPS 的帧率。

Read more