html5的video的背景图片poster铺满全屏大小方法.doc

 HYPERLINK /13838.html html5的video的背景图片poster铺满全屏大小方法 html5支持视频播放，而且趋势，facebook也全面切换到html5了，最近做一个简单的视频播放器，测试了好多jplayer，video.js之类的都觉得不太好，所以自己写一个最简单的，不过发现了一个问题，视频播放之前的封面不太好…… 封面的尺寸被强制缩小了，我需要填充整个播放器的。 !DOCTYPE html html head meta charset=UTF-8/ title/title style type=text/css .video-container1{ width: 400px; height: 400px; border: solid; } .video1{ width: 100%; height: 100%; } /style /head body div class=video-container1 video class=video1 src=oceans.mp4 poster=1.jpg controls /video /div /body /html  所以查了一下资料，并没有发现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 html head meta charset=UTF-8/ title/title style type=text/css .video-container1{ 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-b