如果浏览器不支持HTML5的<video>标签，我该如何显示图像？

Question

有人知道如何在不支持 img 标签的浏览器中显示图像吗？例如以以下方式显示文本：

<video src="video.mp4" type="video/mp4">
    Your browser does not support the <video> tag
</video>

很简单，但如果我用img标签替换文本，即使浏览器支持视频标签，它也会始终显示图像。

感谢分享你的知识。

（编辑）事实并非如此，我的测试是错误的，当视频标签不受支持时，确实会呈现img标签（例如Safari 5）。

- mpaf

Answer 1

我刚刚查看了这个链接，以及HTML5的规范，因此这段代码应该适用于您：

<video controls="controls" poster="<your image poster if applicable>">
    <source src="video.mp4" type="video/mp4" />
    <img src="<your No video support image>" title="Your browser does not support the <video> tag" />
</video>

- DarkAjax

---

谢谢，是的，它确实有效！我的问题实际上是错误的，我测试过的浏览器只有在不支持<video>时才会显示<img>标签。 - mpaf

截至2015年12月，img src不支持gif。如果您想要一个备用的gif，请查看poster属性。我写了一篇博客文章，其中包含一个示例。 - nishanthshanmugham

对我来说，只显示了海报图像而没有“控件”示例：<video loop="true" autoplay="autoplay" muted poster="img/1920x1080/Introduction.png"> - nimey sara thomas

Answer 2

使用JavaScript，您可以运行以下操作：

var html5video = !!document.createElement('video').canPlayType;

这将取决于您是否有支持，结果可能为真或假。然后，您可以使用javascript将视频标签替换为图像，或者更简单地，只需将视频设置为display:none;和图像设置为display:block;或反之亦然。

- Rich Bradshaw

---

我以为你已经尝试过了，但没成功！哦，无论何时我都能使用!!（叹号叹号），这让我很开心！ - Rich Bradshaw

Answer 3

可以使用视频标签的海报属性。

<video controls poster="/images/w3html5.gif">

  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_poster

注意： 此功能不支持Internet Explorer浏览器。

- Nouman Ahmad