html5中视频背景的后备答案

【问题标题】：Fallback for video background in html5html5中视频背景的后备
【发布时间】：2015-11-22 14:01:31
【问题描述】：

我正在尝试在 html 5 中添加一个静态图像作为视频背景的后备，但没有得到任何人的帮助。

<div class="background-wrap">
    	<video id="video-bg-elem" preload="auto" autoplay loop muted>
        	<source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
        <img src="/media/staticimage.jpg" title="Your browser does not support the <video> tag">
        	
            Video not supported
        </video>
    </div>

【问题讨论】：

可能重复：stackoverflow.com/questions/14616453/…
伙计，我试过用那个解决方案它不起作用。这就是为什么再次在这里发布。有人在这里给出的解决方案有效。你不应该删除答案。无论如何我得到了答案。谢谢！！

标签： javascript jquery html html5-video

【解决方案1】：

检查您的图像路径并将标题中的<video>标签替换为&lt; &gt;

<div class="background-wrap">
    <video id="video-bg-elem" preload="auto" autoplay loop muted>
        <source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
    <img src="/media/staticimage.jpg" 
      title="Your browser does not support the &lt;video&gt; tag">

        Video not supported
    </video>
</div>

【讨论】：

【解决方案2】：

我建议不要使用视频区域内的图像，而是使用背景图像。

#video-bg-elem {background-image: url(media/staticimage.jpg);}

<div class="background-wrap">
 <video id="video-bg-elem" preload="auto" autoplay loop muted>
  <source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
  Video not supported
 </video>
</div>

【讨论】：