如何在网站上显示相同的 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 制作 <video> 元素，然后将其放在您想要的位置。

var video1 = document.createElement("video");
video1["data-videoid"] = "JYpUXXD4xgc";
var sourceElem = document.createElement("source");
sourceElem.src = "video.php?videoid=JYpUXXD4xgc";
sourceElem.type = "video/mp4";
video1.appendChild(sourceElem);

var video2 = video1.cloneNode(true); //This makes a copy of the element, but makes sure it's not treated as the same element. This means you can add video1 AND this _different_ element to the document. However, unfortunately, everything still needs to get loaded again. I think this is the easiest way to copy an element over, though.
video2.id = "bigVideo";
video1.id = "previewVideo";

document.addEventListener("DOMContentLoaded", function() {
    //Now put video1 and video2 where you want.
});

Answer 2

这可以通过 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);
}

画布获取视频图像并在 BigVideo 上再次显示。
updateBigVideo() 函数每 20 毫秒调用一次，帧速率约为 50 FPS。

Read more

Answer 3

最优解

let videoPlayCount = 1;
    let video = document.getElementById('amplify-mould-video');

    video.addEventListener('ended',videoHandler,false);
    function videoHandler() {
        if(videoPlayCount < 2){
            videoPlayCount++;
            video.play();
        }else{
            video.pause();
            video.removeEventListener('ended',videoHandler)
        }
    }

<video id="video" muted="" autoplay="" controls>
    <source src="#" type="video/mp4">
</video>

Answer 4

一个简单的解决方案可以是使用 #anything 在 url 的末尾添加一个值

由于您正在将视频加载到一个视频元素中，并且想在另一个视频元素中再次加载它，您可以使用 unique url 如下所示进行排列：

<video autoplay id="mainVideo">
    <source src="video.php?videoid=JYpUXXD4xgc&item=1" type="video/mp4"/>
</video>

<video autoplay id="previewVideo">
    <source src="video.php?videoid=JYpUXXD4xgc&item=2" type="video/mp4"/>
</video>