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>

      完整代码如下图:

        

  • 相关阅读:
    HBase Java API 创建表时一直卡住
    HBase Shell常用的命令
    Three.js中自定义控制几何体的点和面的属性
    Three.js中使用材质覆盖属性
    2021.7.28 发布 gcc-11.2
    解决a 标签在ie8下面不下载问题
    sourceTree拉取代码报错:remote: HTTP Basic: Access denied
    javaScript网页版调用百度地图API (支持HTTPS,兼容IE6+)
    js 时间戳与时间的相互转换
    HTB-Pathfinder
  • 原文地址:https://www.cnblogs.com/h5kang/p/6150031.html
Copyright © 2011-2022 走看看