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

Question

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

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

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

preView.src = url;

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

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

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

如何避免这个问题？

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

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

所以最后一个问题是如何告诉浏览器仅加载视频一次但按顺序在两个不同的视频标签中使用？有任何提示如何实现这一目标吗？如果能得到一些帮助那就太好了。

Answer 1

您可以尝试仅加载视频一次(在主视图中)并在单独的 Canvas 中显示预览。

类似于:

  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)

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

您可以阅读此article有关 html5 和组合的更多信息