使用视频标签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 mobile 似乎更喜欢 webm。

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

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

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

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