Question

有谁知道如何为不支持标签的浏览器显示图片？显示如下文字：

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

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

感谢您分享您的知识

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

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

Answer 2

使用javascript，您可以运行：

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

根据您是否有支持，这将是真是假。然后，您可以使用javascript将视频代码替换为图片，或者更简单，只需将视频设置为display:none;，将图片设置为display:block;，反之亦然。

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

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

3 个答案: