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

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

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

我在做什么

 

然后在js

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

当然,由于img是在video内部,它不起作用。 我想我可以克隆img并将其附加到video元素之前然后隐藏video元素,如下所示:

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

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

poster可能是你正在寻找的:

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

例:

  

试试这个-

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

而不是创建图像的副本。