Question

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

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

（请参阅jsfiddle了解HTML）

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

有关html5和combos

的更多信息，请阅读此article

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

1 个答案: