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

最新推荐文章于 2024-05-31 22:20:16 发布

猫_

最新推荐文章于 2024-05-31 22:20:16 发布

阅读量3.8w

点赞数 19

文章标签： html5

本文链接：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);

猫_

关注

19
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
关于html5的video全屏作为背景的方法

在这里提供两种方法1.直接用css来实现代码如下： *{ margin: 0px; padding: 0px; } video{ position: fixed; right: 0px; bottom: 0px;
复制链接

扫一扫