zoukankan      html  css  js  c++  java
  • HTML5中将video设置为背景的方法

      主要用到了video标签,css样式,原理是先将video标签利用position:fixed;使video标签脱离文档流,在将他的z-index设置为最低的,比如-9999。再插入的内容自然就覆盖在视频上面了。

          1.首先,将video插入到网页中,宽度设置为100%,其余的设置按照H5标准根据需求来设置。比如进入网页自动播放(autoplay)、循环播放(loop) 、静音(muted)等。代码如下:

                      <video width="100%" autoplay="autoplay" loop="loop" muted="muted">
                               <source src="video/video.mp4" type="video/mp4"></source>
                      </video>

            2.css设置video样式,代码如下:

                    video{
                                position: fixed;
                                z-index: -9999;
                                -webkit-filter: grayscale(100%);
                       }

            3.然后就可以在video背景区域添加想要的布局了,

                   html代码如下:

                            <div>
                                  我是video背景
                            </div>

                    css代码如下:

                            div{
                                500px;
                                height: 300px;
                                font-size: 8em;
                                color: yellow;
                             }

        4.如果想要调整video的播放速度,可以使用playbackRate属性来实现,代码如下:

                    <script>

                         var video= document.querySelector('video');

                         video.playbackRate = 0.5;

                    </script>

      完整代码如下图:

        

  • 相关阅读:
    仿IOS中下拉刷新的“雨滴”效果
    BZOJ 4216 Pig 分块乱搞
    mybatis学习笔记(10)-一对一查询
    关于人性,我是这么看的——“唯进化”论!
    IDEA引MAVEN项目jar包依赖导入问题解决
    IntelliJ IDEA 缓存和索引介绍和清理方法
    springboot整合mybatis使用阿里(阿里连接池)和xml方式
    Intellij 如何在新窗口中打开项目
    intellij idea 在什么地方打开终端Terminal
    Spring Boot 集成MyBatis
  • 原文地址:https://www.cnblogs.com/h5kang/p/6150031.html
Copyright © 2011-2022 走看看