即使浏览器支持 html5 视频，也显示后备图像

Posted 2023-05-07

【中文标题】即使浏览器支持 html5 视频，也显示后备图像

【英文标题】：Display fallback image even if the browser supports html5 video

【发布时间】：2013-03-08 03:59:53

【问题描述】：

这听起来可能很奇怪，但在这种情况下我还能显示后备图片吗？

由于移动设备（android 和 ios）中的视频元素在点击时会打开其原生视频播放器应用程序，因此我想显示适用于 Android 和 iOS 的视频的 GIF 版本（我将作为后备图片放置）。我知道如何通过 javascript 检测浏览器是否是移动的，我只需要一些关于最佳实践的建议。

我在做什么

<video>
    <source mp4>
    <source ogg>
    <source webm>
    <img src="*.gif">
</video>

然后在js中

if(site.isMobile())
    $('video').hide();
    $('video img').show();

当然它不起作用，因为 img 在视频内。我想我可以克隆 img 并将其附加到视频元素之前，然后隐藏视频元素，如下所示：

if(site.isMobile())
    $('video img').clone().prependTo('video'); // just some pseudocode
    $('video').hide();

这是一个好习惯吗？有没有更简单的解决方案？

【问题讨论】：

人们如何在不点赞的情况下收藏这些问题？这个问题很清楚，而且问的是一个反复出现的问题。

【参考方案1】：

poster 可能就是您要找的：

海报：指示要在用户播放或查找之前显示的海报框架的 URL。如果未指定此属性，则在第一帧可用之前不显示任何内容；然后第一帧显示为海报帧。 -通过https://developer.mozilla.org/en-US/docs/html/Element/video

示例：

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

【讨论】：

这个答案应该被标记为正确：它更干净并且不依赖于 JavaScript。

^ 不，最初的问题是即使支持视频也要显示（海报）图像

效果很好，尤其是对于苹果设备，因为它们非常友好地删除了“自动播放”功能：/

@JDavies 取决于您要执行的操作，自动播放仍然可用。如果您将视频静音，它仍然可以使用。

这些视频现在完全无法在移动设备中自动播放。l 而且海报不显示，而是显示视频的第一帧但暂停了。

【参考方案2】：

试试这个-

if(site.isMobile())
    $('video *').hide();
    $('video img').show();

而不是创建图像的副本。

【讨论】：

这是真实代码还是伪代码？ site.isMobile() 来自哪里？