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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<span class="hljs-tag">< !<span class="hljs-attr">DOCTYPE</span> <span class="hljs-attr">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">head</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>/></span>
        <span class="hljs-tag"><<span class="hljs-name">title</span>></span><span class="hljs-tag"></<span class="hljs-name">title</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span>></span><span class="css">
        <span class="hljs-selector-class">.video-container1</span>{
            <span class="hljs-attribute">width</span>: <span class="hljs-number">400px</span>;
            <span class="hljs-attribute">height</span>: <span class="hljs-number">400px</span>;
            <span class="hljs-attribute">border</span>: solid;
        }
        <span class="hljs-selector-class">.video1</span>{
            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
        }
        </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-container1"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">video</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video1"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"oceans.mp4"</span> <span class="hljs-attr">poster</span>=<span class="hljs-string">"1.jpg"</span> <span class="hljs-attr">controls</span>></span>

        <span class="hljs-tag"></<span class="hljs-name">video</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>

所以查了一下资料，并没有发现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属性去告诉浏览器，这个播放器或者这个元素被这个图片覆盖。

1
2
3
4
5
6
7
8
9
10
11
video{
    width: <span class="hljs-number">100</span>%;
    height: <span class="hljs-number">100</span>%;
    background:<span class="hljs-function">transparent <span class="hljs-title">url</span>(<span class="hljs-params"><span class="hljs-string">'img/1.jpg'</span></span>) 50% 50% no-repeat</span>;

    <span class="hljs-comment" data-garbage="true">//下面就是background-size，每种浏览器都写一个配置</span>
    -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）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<span class="hljs-tag">< !<span class="hljs-attr">DOCTYPE</span> <span class="hljs-attr">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">head</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>/></span>
        <span class="hljs-tag"><<span class="hljs-name">title</span>></span><span class="hljs-tag"></<span class="hljs-name">title</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span>></span><span class="css">
        <span class="hljs-selector-class">.video-container1</span>{
            <span class="hljs-attribute">width</span>: <span class="hljs-number">400px</span>;
            <span class="hljs-attribute">height</span>: <span class="hljs-number">400px</span>;
            <span class="hljs-attribute">border</span>: solid;
        }
        <span class="hljs-selector-class">.video1</span>{
            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
        }
        <span class="hljs-selector-class">.video-container2</span>{
            <span class="hljs-attribute">width</span>: <span class="hljs-number">400px</span>;
            <span class="hljs-attribute">height</span>: <span class="hljs-number">400px</span>;
            <span class="hljs-attribute">border</span>: solid;
        }
        <span class="hljs-selector-class">.video2</span>{
            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
            <span class="hljs-attribute">background</span>:transparent <span class="hljs-built_in">url</span>(<span class="hljs-string">'1.jpg'</span>) <span class="hljs-number">50%</span> <span class="hljs-number">50%</span> no-repeat;
            <span class="hljs-attribute">-webkit-background-size</span>:cover;
            <span class="hljs-attribute">-moz-background-size</span>:cover;
            <span class="hljs-attribute">-o-background-size</span>:cover;
            <span class="hljs-attribute">background-size</span>:cover;
        }
        </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-container1"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">video</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video1"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"oceans.mp4"</span> <span class="hljs-attr">poster</span>=<span class="hljs-string">"1.jpg"</span> <span class="hljs-attr">controls</span>></span>

        <span class="hljs-tag"></<span class="hljs-name">video</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-container2"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">video</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video2"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"oceans.mp4"</span> <span class="hljs-attr">poster</span>=<span class="hljs-string">"2.jpg"</span> <span class="hljs-attr">controls</span>></span>

        <span class="hljs-tag"></<span class="hljs-name">video</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>

展示效果如下：