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


本站长承接“企业网站定制服务,有想做网站的客户可联系!站长QQ:739696033 | 微信:bing-0719

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>

blog_html5_video_background_01_20151223.jpg
blog_html5_video_background_02_20151223.jpg

所以查了一下资料,并没有发现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>
<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-background-size:cover;
            -moz-background-size:cover;
            -o-background-size:cover;
            background-size:cover;
        }
        </style>
    </head>
    <body>
    <div class="video-container1">
        <video class="video1" src="oceans.mp4" poster="1.jpg" controls>

        </video>
    </div>
    <div class="video-container2">
        <video class="video2" src="oceans.mp4" poster="2.jpg" controls>

        </video>
    </div>
    </body>
</html>

展示效果如下:

 

站长QQ:739696033 | 微信:bing-0719:Bcoder资源网 » html5的video的背景图片poster铺满全屏大小方法


扫描二维码关注微信公众号:“bcoder-cn 声明:本站内容部分来自互联网,仅供交流学习之用,请勿作商业用途,版权归原作者所有。如果有侵犯到您的权益,请提供相关证明联系本站删除,谢谢合作!
赞 (1)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址