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>

      完整代码如下图:

        

  • 相关阅读:
    性能测试应用领域
    性能测试---不同视角看性能和相关术语
    Jmeter(二十五)Jmeter之系统函数
    Jmeter(二十四)Jmeter-Question之“加密请求参数”
    Web应用层协议---HTTP
    协议栈CheckList
    数据报表类(BI)项目测试应该如何去啃?
    #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(二)
    解决未安装unit测试和jest的Vue项目运行karma start时的错误
    npm run dev运行Vue项目报错:Node Sass does not yet support your current environment
  • 原文地址:https://www.cnblogs.com/h5kang/p/6150031.html
Copyright © 2011-2022 走看看