Question

我已经广泛阅读并尝试了其他线程中的所有解决方案而没有运气。

我的问题是这样的：当浏览器不支持视频代码时，我设置的备用图片不会显示，而video-div只显示正文背景。 < / p>

以下是我用于视频/图片的代码：

            <div id="video-div">
              <video id="landing-video" autoplay loop>
              <source src="images/landing-video.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
              <source src="images/landing-video-webm.webm" type='video/webm; codecs="vp8, vorbis"'>
              <img src="images/landing-video-backup.JPG" title="Your broswer does not support the <video> tag"/>
            </video>

Answer 1

来自MDN

海报

指示在用户播放之前显示的海报框架的URL 寻找。如果未指定此属性，则直到显示任何内容第一帧可用;然后第一帧显示为海报框架。

您需要使用海报属性而非图像标记。

<video id="landing-video" poster="images/landing-video-backup.JPG" autoplay loop>
  <source src="images/landing-video.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="images/landing-video-webm.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>

<video>标签的备用图片

1 个答案: