Question

我有一个带有png类型海报图像的视频标签，并且有一个源视频，但是在IE10中，源视频帧覆盖了海报图像。

请参阅示例代码。我已将preload设置为none以避免IE 9问题，但是任何人都可以提出IE10的问题。我需要提供内容类型吗？

    <video width="100%" height="100%" poster="http://via.placeholder.com/350x150" preload="none" controls="">
       <source src="http//example.mp4">
   </video>

Answer 1

您可以使用CSS在所有浏览器中对其进行修复

HTML：

<div class="video-wrapper">
    <video width="100%" height="100%" poster="path/your-image.jpg" preload="none" id="videoPlayer">
        <source src="http//example.mp4" type="video/mp4">
    </video>
</div>

CSS：

.video-wrapper {
    height: 100%;
    width: 100%;
    background: url(path/your-image.jpg) no-repeat center center;
    background-size: cover;
}

#index-video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -100;
    right: 0;
    bottom: 0;
    background: url(path/your-image.jpg) no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

IE 10海报图像被视频标签中的源覆盖

1 个答案: