12

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

由于移动设备（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();
}

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

4

2 回答 2

45

poster可能是您正在寻找的：

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

例子：

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

于 2013-03-19T17:12:31.987 回答
5

尝试这个-

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

而不是创建图像的副本。

于 2013-03-19T12:58:09.430 回答