HTML5 video标签的poster图片如何填充整个标签区域

更新：

http://blog.csdn.net/wuqingyou_w/article/details/51671356 参考这篇博客

设置<video>标签object-fit:fill即可解决。

——————原文——————

这几天做项目的时候，测试人员提了几次相同的bug：视频的首帧图没有铺满整个播放器。第一次提的时候我去google了一下，看到STO上有个类似的问题：

https://stackoverflow.com/questions/10826784/make-html5-video-poster-be-same-size-as-video-itself

其中被采纳的回答是将video的poster设置成一个透明图，然后定义其背景图片样式为原来要设置为poster的图片，还要不重复、设置cover属性。

但是我怎么用都没办法做到这个效果，后来想到一种方法，在video上方放置一个绝对定位的div块，将div块的背景设置为poster图片。当视频播放时隐藏该div块。效果还是不错的。

代码：

布局：

<div id="poster_img"></div>
<video id="video_id" controls="controls" src=""></video>

div块样式：

#poster_img{
	width: 100%;
	height: 18rem;
	position: absolute;
	background: transparent no-repeat;
        background-size:cover;
 }

隐藏的js：

$("#poster_img").css("background-image","url("+video_picture+")");

//视频播放时隐藏poster-img的div
$("#video_id").bind("play",function(){
	$("#poster_img").hide();
});

2017.8.24更新：

今天遇到一个兼容性问题，safari浏览器中#poster_img块会遮挡<video>标签的播放按钮，导致视频无法播放。目前能想到的解决办法就是点击div块将div块隐藏并启动视频播放。不过还没有试，因为需求又变化了……另一方面就是我使用的安卓机，测试用的是苹果机。

此外，安卓浏览器为什么播放按钮会高于div块而ios的低于div块我也不太明白，希望有人能解答一下。

总结：

html有很多属性有局限性，之前在隐藏video标签的控制按钮时也是靠css黑科技样式来隐藏。不管怎样，bug解决了。第一次遇到这个bug我是拒绝的，等到测试说了几次我才认真对待，也算运气好临时想到了，以后要是遇到麻烦的问题再逃避，之后没时间再处理，就对项目很不负责任了。