在<video>标签中使用GIF，或在<img>标签中使用视频

Question

4

我一直在尝试找到一种方法，可以在同一个标签中显示gif和video（.mp4、.ogg、.webm）。

因此，如果它在<video>标签中，我只需要更改<source>的源或<source>本身为gif或video，并相应地显示它。

不幸的是，我没有找到任何共识，可以允许这样做。

在我转向更难的解决方案之前，有人有简单的解决方案吗？

- Fane

如果您可以更改视频元素的源，则通过显示一个并隐藏另一个来在video和img元素之间进行“切换”也不应该更加“困难”。 - CBroe

1

这只是我的观点，但 GIF 图片非常大，如果这样说的话。相同内容的 webm 视频要小得多，可以在 <video> 标签中使用控件和禁用音频，并启用循环，从而为用户提供相同的体验。在我看来，这绝对是更好的选择。 - Brian

@BrianBennett 你知道如何即时将gif转换为webm吗？ - Fane

1

这是你需要事先完成的任务。你可以使用像Handbrake这样的GUI程序来运行转换，也可以使用像ffmpeg这样的命令行程序。这个SO问题有一个适用于ffmpeg的命令（忽略答案...使用问题代码）。 - Brian

2个回答

2

你可以在<video>标签中使用poster属性来展示gif文件。但这不是一个完整的解决方案，因为你不能同时使用视频和gif。

- Saeed sdns

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dippas · Accepted Answer

根据MDN，

HTML的<video>元素用于嵌入视频内容。它可以包含多个视频源，使用src属性或<source>元素表示；浏览器将选择最合适的源。

因此，gif不是视频内容，不能在<video>标签中使用。

这是<video>和<audio>支持的格式列表。