html5支持视频播放,而且趋势,facebook也全面切换到html5了,最近做一个简单的视频播放器,测试了好多jplayer,video.js之类的都觉得不太好,所以自己写一个最简单的,不过发现了一个问题,视频播放之前的封面不太好……
封面的尺寸被强制缩小了,我需要填充整个播放器的。
< !DOCTYPE html>
width: 400px;
height: 400px;
border: solid;
}
.video1{
width: 100%;
height: 100%;
}
所以查了一下资料,并没有发现html5的video属性支持处理poster的尺寸问题,然后发现了一个hacker的方法:
The answer is actually quite simple. Instead of providing our poster image as a value to the poster attribute, we define it as a background image for our video element, and use the background-size property to tell the browser that the image is to cover the element in question:
将poster页面设置为一个透明的图片或者不存在的值,这样浏览器就会无法显示poster,然后通过设置播放器的css背景background,将我们需要的背景图放进去,并且填充背景,并且我们用background-size属性去告诉浏览器,这个播放器或者这个元素被这个图片覆盖。
video{
width: 100%;
height: 100%;
background:transparent url('img/1.jpg') 50% 50% no-repeat;
//下面就是background-size,每种浏览器都写一个配置
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
< !DOCTYPE html>
width: 400px;
height: 400px;
border: solid;
}
.video1{
width: 100%;
height: 100%;
}
.video-container2{
width: 400px;
height: 400px;
border: solid;
}
.video2{
width: 100%;
height: 100%;
background:transparent url('1.jpg') 50% 50% no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
展示效果如下:
免费支持本站,谢谢大家!
微信公众号: bcoder资源网