即使浏览器支持html5视频，也会显示后备图像 [英] Display fallback image even if the browser supports html5 video

问题描述

由于移动设备（Android和iOS）中的视频元素将打开其原生视频，因此可能听起来很奇怪，但是我仍然可以在这种情况下显示后备图片吗？播放器应用程序点击时，我想显示GIF版本的视频（我将把它作为后备图像）用于Android& iOS版。我知道如何通过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'）; //只是一些伪代码
 $（'video'）。hide（）; 
} 
  

这是一个很好的做法吗？有没有更简单的解决方案？

解决方案

海报重新寻找：

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

示例：

 < video width =220height =140poster =https://i.stack.imgur.com/BfXRi .png控件> < source src =https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4type =video / mp4/> < source src =https://clips.vorwaerts-gmbh.de/big_buck_bunny.ogvtype =video / ogg/>您的浏览器不支持视频标记。< / video>  

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.

What I'm doing

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

Then in the 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 :

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

Is it a good practice though? Is there any simpler solution?

解决方案

poster may be what you're looking for:

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

Example:

<video width="220" height="140" 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>

这篇关于即使浏览器支持html5视频，也会显示后备图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！