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

Question

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

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

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

preView.src = url;

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

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

到目前为止，它运行良好。 除了视频总是加载两次，这是浪费资源和浪费时间。

如何避免这个问题？

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

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

所以最终的问题是如何让浏览器加载视频只有一次，但在使用两个不同的视频标签，依次？ 任何提示如何实现这一目标？ 能得到一些帮助会很棒。

Answer 1

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

就像是：

  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 和组合的更多信息