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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lichking11/article/details/77508999

更新:

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我是拒绝的,等到测试说了几次我才认真对待,也算运气好临时想到了,以后要是遇到麻烦的问题再逃避,之后没时间再处理,就对项目很不负责任了。

展开阅读全文

没有更多推荐了,返回首页