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

Question

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

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

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

Answer 1

poster 可能是你在寻找的东西:

海报:指示在用户播放或搜索之前显示的海报框架的URL.如果未指定此属性,则在第一帧可用之前不会显示任何内容; 然后第一帧显示为张贴框.-Via 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>

Answer 2

试试这个-

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

而不是创建图像的副本.