我如何在一个网站上显示相同的HTML 5视频两次而不加载它两次

How can I show the same HTML 5 Video twice on a website without loading it twice?

本文关键字：两次 视频 HTML 加载 一个 显示 网站      更新时间：2023-09-26

我的html-page上目前有2个video元素
两者都嵌入了来自相同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>

这可以通过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()函数每20ms调用一次，导致帧率约为50fps。

阅读更多

首先，用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.
});

兴趣实验特征:

<video id="vid" src="test.mp4" autoplay loop muted></video>
<div style="background:-moz-element(#vid); background-size: cover; width: 1280px; height: 720px; "></div>

(仅限firefox浏览器，并且在2023年使用-moz-前缀)

https://developer.mozilla.org/en-US/docs/Web/CSS/element

https://w3c.github.io/csswg-drafts/css-images-4/element-notation

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

既然你在一个视频元素中加载视频，并且想在另一个视频元素中再次加载它，你可以像下面这样用唯一的 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>

最优解

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>

相关文章：