如何在网站上两次显示相同的HTML 5视频而无需加载两次？ [英] How can I show the same HTML 5 Video twice on a website without loading it twice?

问题描述

我目前在我的html页面上有2个视频元素。

都嵌入了完全相同的 .mp4 视频。

有什么办法可以告诉浏览器从第一个视频元素复制渲染视频，而不是让浏览器下载这两个视频？

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

我的代码：

 < video autoplay id =previewVideodata-videoid = JYpUXXD4xgc> 
< source src =video.php？videoid = JYpUXXD4xgctype =video / mp4/> 
< / video> 
 
< video autoplay id =bigVideodata-videoid =JYpUXXD4xgc> 
< source src =video.php？videoid = JYpUXXD4xgctype =video / mp4/> 
< / video> 
  

解决方案

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

HTML：

 <视频自动播放id =previewVideodata-videoid =JYpUXXD4xgc> 
< source src =video.php？videoid = JYpUXXD4xgctype =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上再次显示。

每20ms调用 updateBigVideo（）函数，从而产生大约50 FPS的帧率。

在这里阅读更多： http://html5doctor.com/video-canvas-magic/

I currently have 2 video elements on my html-page.
Both embed exactly the same .mp4 video from the same URL.

Is there any way to tell the browser to duplicate the rendered video from the first video element instead of letting the browser download both videos?

You can cleary see that the two videos are loaded seperated as they have a different buffering time before playback sometimes and the videos dont play synchronized everytime.

My Code:

<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>

解决方案

This can be done in some very easy steps via Javascript and the Canvas Element:

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);
}

The canvas fetches the image of the video and displays it again on the BigVideo.
The updateBigVideo() function is called every 20ms, resulting in a framerate of about 50 FPS.

Read more here: http://html5doctor.com/video-canvas-magic/

这篇关于如何在网站上两次显示相同的HTML 5视频而无需加载两次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！