video 得背景图 poster 可以为video添加背景图片
<video controls poster="img/newLiat_1.jpg" class="new_img">
<source src="video/review_video.mp4" type="video/mp4">
你的浏览器不支持视频插件
</video>
有的时候 发现背景图片 没有平铺整个视频区域
解决方案
1.css 方案
video {
object-fit: fill;
}
效果:
兼容性
相关链接 https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
2.添加img
<div class="review_video_main">
<div class="video_main">
<video controls="">
<source src="./video/review_video.mp4" type="video/mp4">您的浏览器版本太低,请及时更新
</video>
</div>
<div class="video_btn">
<img src="./img/review_video_bg.png" alt=""> //封面图片
<button type="button" title="" class="playicon"></button> 按钮
</div>
</div>
效果