不预加载视频，但仍显示 "thumbnail"

Question

我正在尝试显示很多视频 thumbnails/posters 但实际上并未加载视频...

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

<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 个视频...

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

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

在我的例子中，虽然没有理由加载漏洞视频，因为（正如您在代码中看到的那样），当单击 div 时，实际视频会显示在另一个页面上。

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

有什么办法可以做到这一点吗？我也愿意接受 Javascript/jQuery 解决方案...

Answer 1

在视频源url中追加#t即可获取不同时间段的视频帧。但是使用 preload none 属性值您无法获取视频帧。所以你需要在 preload 属性中使用 metadata 值。这些是您可以在 preload 属性中使用的三个值：

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

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

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 承受着相当大的压力。我推荐的另一种（更先进的）方法如下。

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

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

尝试运行下面的代码片段 :)

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>

不预加载视频，但仍显示 "thumbnail"

Don't preload video, but still show "thumbnail"

html

javascript

jquery

html5-video