video标签的预览图poster常见问题

video的poster属性

<video poster="xxx"></video>

poster属性用来指定video的预览图。但是使用过程中常常遇到各种不尽人意的问题。

当视频尺寸较高时，预览图会居中

在线案例：请见《一》

 <video id="testVideo1"
           controls="true"
           playsinline="true"
           webkit-playsinline="true"
           poster="v-poster-default.png" 
           src="http://v.qdxin.cn/v/2021/20210430-pingdudaodeyinhang-s.mp4"
           height="300" 
></video>

当预览图的尺寸低于视频高度时，预览图会居中。如果对于要求不高的话，其实这种效果完全是可以接受的。

视频设置object:fill

在线案例：请见《二》

可见设置了object:fill，预览图是填满了，但是会根据视频高度进行拉伸，然而播放的视频也会被拉伸；而设置为cover，视频播放会被剪裁。

使用background或img替代poster属性

如果对于效果要求比较苛刻，那么就要用这种方式了。具体思路：

• 使用图片作为父元素背景或者用Img置于video底部
• video的poster使用一张透明的png
• 在播放时，用JS将父元素背景设置为黑色，或者隐藏Img背景图。

比较完美的解决方案

// css
 video{width: 100%;display: block;position: relative;z-index: 1}
.v-box{background: #000;margin: 20px 0;position: relative;}
.v-box.playing img{display: none;}
.v-box img{position: absolute;top: 0;bottom: 0;width: 100%;min-height: 100%;object-fit: cover;}

// HTML
<div class="v-box" id="v-box2">
    <video id="testVideo2"
           controls="true"
           playsinline="true"
           webkit-playsinline="true"
           poster="video-poster.png" 
           src="http://v.qdxin.cn/v/2021/20210430-pingdudaodeyinhang-s.mp4"
           height="300" 
    ></video>
    <img src="v-poster-default.png">
</div>

// JS
 var v2 = document.getElementById('testVideo2');
    var vbox2 = document.getElementById('v-box2');
    v2.addEventListener('play', function() {
      vbox2.classList.add('playing');
});

在线效果：请见《四》