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

更新：

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

设置

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

这几天做项目的时候，测试人员提了几次相同的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块样式：

#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块会遮挡

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

总结：

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