jQuery 即使浏览器支持 html5 视频，也显示后备图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15500154/
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
Display fallback image even if the browser supports html5 video
提问by Henson
This might sound strange, but can I still display fallback image in that case?
这听起来可能很奇怪，但在这种情况下我还能显示后备图像吗？
Since video elements in mobile (Android & iOS) will open its native video player app when clicked, I want to show GIF version of the video (which I will place as the fallback image) for Android & iOS. I know how to detect whether the browser is mobile or not via Javascript, I just need some advice on best practice.
由于移动设备（Android 和 iOS）中的视频元素将在单击时打开其本机视频播放器应用程序，因此我想显示适用于 Android 和 iOS 的视频的 GIF 版本（我将其作为后备图像）。我知道如何通过 Javascript 检测浏览器是否是移动的，我只需要一些关于最佳实践的建议。
What I'm doing
我在做什么
<video>
<source mp4>
<source ogg>
<source webm>
<img src="*.gif">
</video>
Then in the js
然后在js中
if(site.isMobile()){
$('video').hide();
$('video img').show();
}
Of course it doesn't work since the img is inside video. I figure I can clone the img and append it before the video element and then hide the video element, something like this :
当然它不起作用，因为 img 在视频中。我想我可以克隆 img 并将其附加在视频元素之前，然后隐藏视频元素，如下所示：
if(site.isMobile()){
$('video img').clone().prependTo('video'); // just some pseudocode
$('video').hide();
}
Is it a good practice though? Is there any simpler solution?
不过，这是一个好习惯吗？有没有更简单的解决方案？
回答by couzzi
postermay be what you're looking for:
poster可能是您要找的：
Poster: A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is displayed as the poster frame. -Via https://developer.mozilla.org/en-US/docs/HTML/Element/video
海报：一个 URL，指示在用户播放或搜索之前要显示的海报框架。如果未指定此属性，则在第一帧可用之前不显示任何内容；然后第一帧显示为海报帧。- 通过https://developer.mozilla.org/en-US/docs/HTML/Element/video
Example:
例子：
<video width="316" height="161" poster="https://i.stack.imgur.com/BfXRi.png" controls>
<source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
Your browser does not support the video tag.
</video>回答by ShuklaSannidhya
Try this-
尝试这个-
if(site.isMobile()){
$('video *').hide();
$('video img').show();
}
rather than creating a copy of the image.
而不是创建图像的副本。
