HTML5视频回退/备份图像不合适..

html5 video fallback/backup image out of place...?

本文关键字：图像 不合适 备份 视频 回退 HTML5      更新时间：2023-09-26

我写了以下html，它显示了视频背景并有2个回退图像（适用于移动和旧浏览器）

<div>
   <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
    <!--<source src="whatever......">  Disabled for testing  -->
    <img id="browserFallback src="videos/video.gif" title="Your browser does not support the <video> tag">
    </video>
   <img id="mobileFallback" style="display:none;" src="videos/video.gif" title="Your browser does not support the <video> tag">
</div>

下面的JavaScript在手机上显示第二个IMG GIF而不是视频：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {              
    document.getElementById("mobileFallback").style.display = "block";
}

但是，由于我像上面一样同时有 2 个 img 对象，因此移动回退未对齐，由于某种原因只显示其中的一半。如果我删除"浏览器回退"img，它工作得很好。

关于为什么会发生这种情况的任何想法？

你的代码中有一些简单的错误，可能会解决你的问题。

即：

  • 您忘记关闭第一个图像标记的 id 属性上的引号
  • "您的浏览器不支持<视频>标签"应更改为"您的浏览器不支持$lt;视频&gt;标签"。这将分别在浏览器中呈现为<和>符号，并且可能会混淆您的 HTML。

尝试将代码更改为以下内容：

<div>
   <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
       <img id="browserFallback" src="videos/video.gif" title="Your browser does not support the $lt;video&gt; tag">
    </video>
    <img id="mobileFallback" style="display:none;" src="videos/video.gif" title="Your browser does not support the $lt;video&gt; tag">
</div>
相关文章：