关于html5的video全屏作为背景的方法

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_21831899/article/details/52527444

在这里提供两种方法

1.直接用css来实现代码如下:

  <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        video{
            position: fixed;
            right: 0px;
            bottom: 0px;
            min-width: 100%;
            min-height: 100%;
            height: auto;
            width: auto;
            /*加滤镜*/
            /*-webkit-filter: grayscale(100%);*/
            /*filter:grayscale(100%);*/
        }
        source{
            min-width: 100%;
            min-height: 100%;
            height: auto;
            width: auto;
        }
    </style>
</head>
<body>
//资源格式自己进行添加
 <video autoplay="autoplay" loop="loop">
    <source  src="video/ting.mp4" type="video/mp4" >;
</video>
</body>
2.通过插件,推荐使用ckplayer,然后配置参数,下载地址:www.ckplayer.com

给出一个改变宽度,高度的代码获取:

var docH=(document.body.clientHeight||document.documentElement.clientHeight)-20;
   var docW=document.body.clientWidth||document.documentElement.clientWidth;
   alert(docH);
	CKobject.embedHTML5('a1','ckplayer_a1',docW,docH,video,flashvars,support);





展开阅读全文

没有更多推荐了,返回首页