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

【问题标题】：How can I display an image if browser does not support HTML5's <video> tag如果浏览器不支持 HTML5 的 <video> 标签，如何显示图像
【发布时间】：2012-03-31 20:46:04
【问题描述】：

有谁知道如何为不支持该标签的浏览器显示图像？显示文本，例如：

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

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

感谢您分享您的知识

（编辑）情况并非如此，我的测试是错误的，并且 img 标签确实只有在不支持视频时才会呈现（例如 Safari 5）

【问题讨论】：

标签： image html video tags alt

【解决方案1】：

我只是检查了this link 和HTML5's spec，所以这段代码应该适合你：

<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>

【讨论】：

谢谢，是的，它确实有效！我的问题实际上是错误的，我测试的浏览器只有在不支持
截至 2015 年 12 月，img src 不支持 gif。如果您想要后备 gif，请查看 poster 属性。我用一个例子写了一个blog post。
对我来说，海报图像仅在没有“控件”的情况下显示示例：

【解决方案2】：

使用javascript，你可以运行：

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

根据您是否有支持，这将是对还是错。然后，您可以使用 javascript 将视频标签替换为图像，或者更简单，只需将视频设置为 display:none;，将图像设置为 display:block;，反之亦然。

【讨论】：

我以为您已经尝试过了，但没有成功！哦，好吧，我什么时候可以使用！（砰砰）这让我很开心！

【解决方案3】：

可以使用video标签的poster属性。

<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。

【讨论】：