不预加载视频，但仍显示“缩略图”

Question

我正在尝试显示许多视频缩略图/海报而不实际加载视频...

基本上我得到的是以下内容：

<div class="col-sm-3" style="padding: 20px;" onclick='location.href="/videoDetails/{{ @video.ID }}"'>
      <video width="100%" style="cursor:pointer;"
          <source src="/{{ @video.path }}">
           Your browser does not support the video tag.
      </video>
</div>

那个洞是在一个foreach循环中，它在一页上加载多达100个视频......

我现在的问题是这变得超级慢，一次加载的视频越多..

现在我在 StackOverflow 线程上找到了 this 答案，它说要在视频标签上使用属性 preload="none"... 这似乎加快了加载速度（因为它不预加载视频），但是，它根本不显示任何图像（预览）..

在我的情况下，没有理由加载洞视频，因为（正如您在代码中看到的），当点击 div 时，实际视频会显示在另一个页面上。

另外，为了确保您没看错，我想显示视频第一帧的自动生成预览。我无法上传单独的图像以使用poster 属性显示它，它必须是默认图像..

有什么方法可以实现吗？我也对 Javascript/jQuery 解决方案持开放态度...

Answer 1

您可以通过在视频源url中附加#t来获取不同时间段的视频帧。但是使用属性 preload none 值，您无法获取视频帧。所以您需要在preload 属性中使用metadata 值。 以下是您可以在 preload 属性中使用的三个值：

无 - 向浏览器提示用户可能不会观看视频，或者希望尽量减少不必要的流量。

元数据 - 向浏览器提示用户不需要视频，但需要获取其元数据（尺寸、第一帧、曲目列表、持续时间等）。

auto - 提示浏览器乐观地下载整个视频是可取的。 - 向浏览器提示乐观地下载整个视频是可取的。

您可以使用这三个值检查以下结果。

<p>metadata</p>
<video width="300" height="150" controls="controls" preload="metadata">
   <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>

<p>none</p>
<video width="300" height="150" controls="controls" preload="none">
   <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>

<p>auto</p>
<video width="300" height="150" controls="controls" preload="auto">
   <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>

Answer 2

我想说，创建这么多视频 HTML 元素无论如何都会影响性能，无论是否加载，因为 DOM 承受着相当大的压力。 下面是我推荐的一种不同（并且更先进）的方法。

如果您希望在用户点击时加载一张图片，您可以在该特定时刻“创建”一个视频，仅触发请求的视频。 所以：

1. 使用 onclick 侦听器加载图像而不是视频标签，这会将 ID 传递给 JS 函数
2. 当用户点击时，它将创建视频元素。
3. 同时，隐藏图片（或者可能是 gif？）

尝试在下面运行 sn-p :)

function myFunction(id) {
  
  var element = document.getElementById(id);
  var videlem = document.createElement("video");
    element.innerHTML = '';
  source = 'https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4';
  var sourceMP4 = document.createElement("source"); 
  sourceMP4.type = "video/mp4";
  sourceMP4.src = source;
  videlem.appendChild(sourceMP4);
  videlem.autoplay = true;
  element.appendChild(videlem);
}

<p>Click on the image</p>
<div id="img242">
  <img onclick="myFunction('img242')" src="https://blog.majestic.com/wp-content/uploads/2010/10/Video-Icon-crop.png">
</div>