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

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 线程上找到了这个答案，它说要使用视频标签上的属性preload="none"...这似乎加快了加载速度（因为它不会预加载视频），但是，它不会显示任何内容图像（预览）根本..

就我而言，没有理由加载洞视频，因为（正如您在代码中看到的），当单击div.

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

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

Answer 1

#t通过在视频源url中追加即可获取不同时间段的视频帧。但使用该属性preload none值您无法获取视频帧。所以您需要使用属性metadata中的值preload。以下是您可以在属性中使用的三个值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>