javascript - html5视频后备/备用图片位置不正确...？

我撰写了以下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对象，因此移动后备广告无法对齐，并且由于某种原因仅显示了一半。如果我删除“ browserFallback” img，它会很好地工作。

有什么想法为什么会这样？

最佳答案

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

即：


您忘记关闭第一个图像标签的id属性上的引号
应将“您的浏览器不支持< video >标记”更改为“您的浏览器不支持$lt; video >标记”。这将在浏览器中分别显示为符号，并且可能会使您的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>

关于javascript - html5视频后备/备用图片位置不正确...？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28254407/