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

Question

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

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

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

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

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

Answer 1

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

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

似乎Chrome 移动设备如果可以的话更喜欢webm。

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

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

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

此插件将克服 browser/device 兼容性问题。