html5的video的封面poster图片填充

2019独角兽企业重金招聘Python工程师标准>>>

html5支持视频播放，而且趋势，facebook也全面切换到html5了，最近做一个简单的视频播放器，测试了好多jplayer，video.js之类的都觉得不太好，所以自己写一个最简单的，不过发现了一个问题，视频播放之前的封面不太好……

封面的尺寸被强制缩小了，我需要填充整个播放器的。

< !DOCTYPE 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;
}

详细代码在这里：
友人提醒，将测试代码放到github方便其他人测试：（https://github.com/yuanyuanyuan/my-git/tree/master/test1）

< !DOCTYPE html>

    
        
        
        
    
    
    

        
    
    

        
    
    

展示效果如下：

引用参考：
http://www.iandevlin.com/blog/2013/03/html5/html5-video-and-background-images
http://www.w3school.com.cn/cssref/pr_background.asp
http://www.w3schools.com/css/css_image_transparency.asp

转载于:https://my.oschina.net/u/1260221/blog/761398