HTML5-只加载一次视频，但在两个不同的标签中使用

HTML5 - Loading video only once but use it in two different tags

本文关键字：两个 标签 加载 一次 HTML5- 视频      更新时间：2023-09-26

在一个网站中有两个不同id的视频标签。一个是模式对话框中的预览监视器，另一个是网站本身的主视图监视器。

<video  src="" id="preView"  ></video>
<video  src="" id="mainView" ></video>

加载网站时，视图为空。通过模式对话框，用户可以从文件列表中选择他们想要的视频作为url，然后在单击时将其分配给preview元素。

preView.src = url;

选择视频后，最后单击一个按钮在主视图监视器中打开视频。此时，preView.src被分配给mainView.src元素。并且preView元素被清除以停止任何进一步的加载。

mainView.src = preView.src;
preView.src = '';

到目前为止一切顺利。除了视频总是加载两次，这是浪费资源和时间。

如何避免这个问题？

我的第一种方法是只使用一个视频元素，并根据需要将其从一个地方移动到另一个地方。但他的工作只能通过一些昂贵的javascript代码来触发css样式，我想避免这种情况。

我的第二种方法是简单地从一个元素中取消引用加载的视频，并在另一个元素中将其引用，而不需要再次加载，这总是在以通常的方式分配时发生。

因此，最后一个问题是如何告诉浏览器只加载一次视频，但依次在两个不同的视频标签中使用？有什么提示可以实现吗？如果能得到一些帮助就太好了。

您可以尝试只加载一次视频(在主视图中(，并在单独的画布中显示预览。

类似于：

  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var video = document.getElementById('video');
  video.addEventListener('play', function() {
    var $this = this;
    var cw = Math.floor(video.clientWidth / 5);
    var ch = Math.floor(video.clientHeight / 5);
    canvas.width = cw;
    canvas.height = ch;   
    (function render() {
      if (!$this.paused && !$this.ended) {
        ctx.drawImage(video,0,0,cw,ch)
        setTimeout(render, 1000 / 30);
      }
    })();
  });

(HTML请参阅jsfiddle(

这种方法需要更多的编码，以便在用户切换到/从预览主视频时管理主视频的自动启动和重置，但它允许您只使用一个画布，并在其中绘制所有预览。

您可以阅读这篇文章，了解有关html5和combos 的更多信息

相关文章：