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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9718109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:08:05  来源:igfitidea点击:

How can I display an image if browser does not support HTML5's <video> tag

imagehtmlvideotagsalt

提问by mpaf

Does anyone know how can I display an image for the browsers which don't support the tag ? Displaying a text such as in:

有谁知道如何为不支持标签的浏览器显示图像?显示文本,例如:

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

Is easy, but if I replace the text with an img tag, it will always show the image, even when the browser DOES support the video tag.

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

Thanks for sharing your knowledge

感谢您分享您的知识

(EDIT) This is not the case, my tests were wrong and img tag indeed gets rendered only when video is not supported (e.g. Safari 5)

(编辑)事实并非如此,我的测试是错误的,只有在不支持视频(例如 Safari 5)时才会渲染 img 标签

回答by DarkAjax

I was just checking this link, as well as HTML5's spec, so this code should work for you:

我只是检查这个链接,以及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>

回答by Rich Bradshaw

Using javascript, you can run:

使用 javascript,您可以运行:

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

That will be true or false depending on whether you have support or not. You can then use javascript to replace the video tag with an image, or, easier, just set the video to display:none;and the image to display:block;or vice versa.

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