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

【问题标题】：IE 10 poster image is overridden by source in video tagIE 10 海报图像被视频标签中的源覆盖
【发布时间】：2018-07-13 05:11:38
【问题描述】：

我有一个带有 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>

【问题讨论】：

这可能仅在您在本地预览文件时发生。当您在网络上发布网站时，这可能不会成为问题。

标签： html

【解决方案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;
}

【讨论】：

我正在动态添加我的视频，所以我如何在 css 中动态更改
在这种情况下，您可以为每个视频元素动态添加内联样式。