html5视频备份/备份图像不合适.？

Question

我编写了下面的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：

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

但是，由于我有两个img对象，就像上面一样，移动回退偏离了对齐，由于某种原因，只有一半会被显示出来。如果我删除"browserFallback“img，它会非常好。

对为什么会发生这种事有什么想法吗？

Answer 1

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

即：

• 忘记关闭第一个图像标记的id属性的引号。
• “您的浏览器不支持<视频>标记”应改为“您的浏览器不支持$lt;视频>标记”。这将在浏览器中分别呈现为<和>符号，可能会混淆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>