HTML5中视频背景的回退方案

Question

我正在尝试在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>

- Ranbijay

---

可能重复：https://dev59.com/ymUq5IYBdhLWcg3wSelm - Miro

兄弟，我之前尝试过那个解决方案，但它并没有起作用。这就是为什么我又在这里发帖的原因。而这里有人给出的解决方案起了作用。你不应该删除那个答案。无论如何，我已经得到了答案。谢谢！ - Ranbijay

Answer 1

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

<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>

- ScaisEdge

Answer 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>

- CDM