使用视频标签html5时如何在移动设备上显示视频缩略图

Posted 2023-05-07

【中文标题】使用视频标签html5时如何在移动设备上显示视频缩略图

【英文标题】：How To show video thumbnail on mobile when using video tag html5

【发布时间】：2020-02-05 13:33:30

【问题描述】：

我需要在移动设备上查看我的视频的缩略图。到目前为止，我发现的一切都不起作用。这是我现在的代码：

<video class="some_class" controls>
    <source src="some/url/path.mp4"  >
</video>

我尝试的是将preload="metadata" 和我的帧添加到我的视频源#t=0.5，但这些都不起作用。

无法使用海报，因为我不知道客户想在特定视频上使用的女巫图片。

由于缩略图适用于所有其他浏览器（移动浏览器除外），因此该问题非常特定于移动设备。

【问题讨论】：

How to set the thumbnail image on html5 video?的可能重复

我的问题是特定于移动设备的。它适用于除移动浏览器之外的所有浏览器。此外，那里的所有解决方案都不适用于我的情况

您的客户为什么要在您的视频中设置这些缩略图？

客户可以选择视频，因为我们正在使用 AEM（一种 CMS）。这就是我们不能使用固定图像的原因

【参考方案1】：

尝试添加以下格式的视频。

webm(vp8/vorbis) mp4(h264/aac)

如果可以的话，Chrome mobile 似乎更喜欢 webm。

Safari（可能还有 ios）不会播放视频，除非由支持字节范围的服务器提供服务。例如 Apache、nginx 和 Amazon S3 确实支持它们，但许多较小的 Web 服务器（如 WSGI 服务器）不支持。

如果浏览器能够检测到视频，则应显示缩略图。

你也可以试试这个插件Fancy app。

这个插件将克服浏览器/设备的兼容性问题。