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 gif而不是视频：

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

但是，因为我像上面一样同时有2个img对象，所以移动回退不对齐，只有一半由于某种原因显示出来。如果我删除＆＃34; browserFallback＆＃34;它完全正常。 IMG。

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

Answer 1

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

即：

您忘记关闭第一张图片标记的id属性上的引号
“您的浏览器不支持<视频>代码”应更改为“您的浏览器不支持$lt;视频>代码”。这将在浏览器中呈现为＆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>

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

1 个答案: