加载时的iphone视频图像不显示

Question

我在我的网页上显示一个视频，内容如下：

<div class="gl-bot-left">
    <video controls="">
        <source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4" 
                type="video/mp4">Your browserdoes not support the video tag.
    </video>
</div>

这在桌面上运行良好。视频加载，您可以看到开始的图像。但是，在 iphone 上，我得到的是播放按钮的图像，而不是实际图像。当我按下它时，视频开始了。有没有一种方法可以在视频首次加载时显示图像？

Answer 1

HTML <video> 对象具有适用于您的用例的特定属性：poster。它指定在您的视频播放尚未开始时显示的图像。

<div class="gl-bot-left">
    <video controls="" poster="https://picsum.photos/id/1/200/300">
        <source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4" 
                type="video/mp4">Your browserdoes not support the video tag.
    </video>
</div>

编辑

我真的无法告诉你为什么它不能在你的 iOs 设备上运行，但我可以提供一个很好的解决方法。

• 在 <video> 标记之前添加带有所需占位符图像的 HTML <image>，并将这两个分组到 <div> 中。
• 通过将图像的可见性设置为隐藏使图像不可见
• 创建一个空的 64x64x（或更小）的空透明 .png 并将其用作视频元素的海报图像。这将确保它不会显示视频的第一帧。
• 最后监听loadedMetaData事件，并在它的回调函数中调整图像的大小到视频的尺寸，并将图像的不透明度设置为可见

var video = document.querySelector('video');

function metaDataLoaded() {
  var image = document.querySelector('img');
  image.width = video.videoWidth;
  image.height = video.videoHeight;
  image.style.visibility = "visible";
}

.container img {
  position: absolute;
  visibility: hidden;
}

video {
  position: absolute;
}

<div class="gl-bot-left">
  <div class="container">
    <img src="https://picsum.photos/id/2/300/200">
    <video controls="" poster="https://i.imgur.com/A9WPATe.png" onloadedmetadata="metaDataLoaded()">
        <source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4" 
                type="video/mp4">Your browserdoes not support the video tag.
    </video>
  </div>
</div>