<small id='60s85m45'></small><noframes id='ah0ieffz'>

  • <tfoot id='egxp7btf'></tfoot>

    <i id='j5metxm9'><tr id='rgv2jno7'><dt id='a1ruppb8'><q id='wxjlpc2g'><span id='lo4ycrw9'><b id='9k58pi3l'><form id='8pyfqd17'><ins id='ab8k75c1'></ins><ul id='3hkkwck9'></ul><sub id='8usvqj16'></sub></form><legend id='4019ia8p'></legend><bdo id='63rk1aer'><pre id='35wnlym1'><center id='46bbfwj5'></center></pre></bdo></b><th id='7v88wf1k'></th></span></q></dt></tr></i><div id='wqvcrt3e'><tfoot id='lx2gljxp'></tfoot><dl id='mxmg9hwm'><fieldset id='7rkuds0c'></fieldset></dl></div>
      <bdo id='xcuai2z5'></bdo><ul id='91ccuaya'></ul>

        <legend id='49phwta7'><style id='5uzvqvxa'><dir id='gb1bfhmn'><q id='bvtsckt8'></q></dir></style></legend>
      1. 精准传达 • 价值共享

        洞悉互联网前沿资讯,探寻网站营销规律

        HTML5实现首页动态视频背景

        作者: 庚午网络 | 2020-11-29 05:18 |点击:

        <legend id='p62e65rd'><style id='3hz5zcnf'><dir id='wu3dm81z'><q id='0azff6wp'></q></dir></style></legend>
      2. <i id='2aydb5rh'><tr id='cdtjgp7x'><dt id='mcw7vclm'><q id='5yek3css'><span id='ajvea31r'><b id='3jvyajs4'><form id='qhwzkhb8'><ins id='4qxwayzz'></ins><ul id='pciftcmz'></ul><sub id='ldgzeepi'></sub></form><legend id='5ou8rn6j'></legend><bdo id='d6zqnmgf'><pre id='v6j88wbt'><center id='045gu79j'></center></pre></bdo></b><th id='zuso2a1a'></th></span></q></dt></tr></i><div id='yevubknp'><tfoot id='dsd91p8z'></tfoot><dl id='aytmix0r'><fieldset id='062s0fzj'></fieldset></dl></div>

          <small id='uhvdb6q8'></small><noframes id='20fk65sl'>

                <bdo id='b5u23n7i'></bdo><ul id='1yzy4951'></ul>
                  <tbody id='f1hpq0bc'></tbody>
                <tfoot id='koeyjb4j'></tfoot>
                • 之前写过一篇文章来记录html把图片背景变成视频背景 《在网站建设中如何将视频设置为网页背景》 今天在给大家带来一个另一个的方法 和上次的加背景方法差不多
                  话不多说,先看效果图:

                  炫酷吗?你想实现这种动态视频作为背景的首页吗?来,一起来学习,本文将带你一起实现H5动态视频背景;

                   

                  首先网上找一段清晰的视频下载下来,最好是MP4格式的;

                  下载好了之后我们新建一个html文件来写代码:

                   html代码:

                  1.    <video id="v1" autoplay loop muted>
                                  <source src="./video2.mp4" type="video/mp4"  />
                            </video>


                   

                  一个video标签包裹着,source代表来源文件,autoplay属性是自动播放,loop代表循环播放,muted代表无声播放;

                  如果不加入autoplay属性是无法自动播放的,页面将会黑屏展示;

                  css代码:

                  1.  *{  
                                margin: 0px;  
                                padding: 0px;  
                            }  
                            video{  
                                position: fixed;  
                                right: 0px;  
                                bottom: 0px;  
                                min-width: 100%;  
                                min-height: 100%;  
                                height: auto;  
                                width: auto;  
                                /*加滤镜*/
                                /*filter: blur(15px); //背景模糊设置 */
                                /*-webkit-filter: grayscale(100%);*/  
                                /*filter:grayscale(100%); //背景灰度设置*/  
                                z-index:-11
                            }  
                            source{  
                                min-width: 100%;  
                                min-height: 100%;  
                                height: auto;  
                                width: auto;  
                            } 

                   


                  css代码主要是进行定位和放大达到全屏播放的效果,主要是对video进行宽高之类的设置,还有别忘了要给z-index给个值,让放置在底部,只要小于0都可以,没有影响;

                  就这样我们的动态视频背景就完成了,如果想设置播放速度,我们可以添加js代码(video标签加上id=“v1”属性):
                   

                  1.         var video= document.getElementById('v1');
                                video.playbackRate = 1.5;

                   


                  那么如果我们想要添加内容到页面上怎么办呢?

                   

                  1.     <video id="v1" autoplay loop muted>
                                  <source src="./video2.mp4" type="video/mp4"  />
                            </video>    
                            <h1 style="color:white">hulingweb.cn</h1>

                   

                  是的,在video标签外部添加


                  这里把完整的HTML5实现背景视频的代码贴出来下供大家参考

                   

                  1. <!DOCTYPE HTML>
                    <html>
                    <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
                    <meta name="format-detection" content="telephone=no" />
                    <title>网页视频</title>
                     
                    </head>
                    <body>
                     
                     
                        <video id="v1" autoplay loop muted>
                                  <source src="http://www.hyundai-ce.cn/256001.mp4"  type="video/mp4"  />
                            </video>
                    <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;  
                                /*加滤镜*/
                                /*filter: blur(15px); //背景模糊设置 */
                                /*-webkit-filter: grayscale(100%);*/  
                                /*filter:grayscale(100%); //背景灰度设置*/  
                     
                                z-index:-11
                            }  
                            source{  
                                min-width: 100%;  
                                min-height: 100%;  
                                height: auto;  
                                width: auto;  
                            } 
                    </style>
                     
                        <video id="v1" autoplay loop muted>
                                  <source src="./video2.mp4" type="video/mp4"  />
                            </video>    
                            <h1 style="color:white">hulingweb.cn</h1>
                    <script>
                    //设置播放速度
                    var video= document.getElementById('v1');
                                video.playbackRate = 1.5;
                     
                        </script>
                     
                    </body>
                    </html>

                   

                   

                  二度创作,如有侵权请联系删除。如没特殊注明,文章均为庚午网络原创,转载请注明https://www.hngengwu.com/gengwuwenku/512.html

                      <small id='7aca8kx5'></small><noframes id='ovs2vjyq'>

                    1. <tfoot id='nxy7i8ms'></tfoot>
                      <i id='4u82qemm'><tr id='ummvygn5'><dt id='cjdkw0uh'><q id='za9jki0k'><span id='k1k607qs'><b id='fx3jk3gb'><form id='pichuafv'><ins id='nlfn5m5m'></ins><ul id='7cw08i6u'></ul><sub id='shlj0wyg'></sub></form><legend id='dn5i2vwl'></legend><bdo id='h4iqss47'><pre id='5b37wxdw'><center id='nmndhksy'></center></pre></bdo></b><th id='vm6qwaef'></th></span></q></dt></tr></i><div id='k8btx3eg'><tfoot id='n07nxanw'></tfoot><dl id='9aav4epr'><fieldset id='rjdz68ix'></fieldset></dl></div>

                      <legend id='j3a28bje'><style id='3fymdujd'><dir id='jni7gete'><q id='6ata9ug7'></q></dir></style></legend>
                        <bdo id='7aqiq00b'></bdo><ul id='inmbshow'></ul>
                      多一份策划方案,总有益处。

                      请直接添加技术总监微信联系咨询

                      网站设计 品牌营销

                      多一份参考,总有益处

                      联系庚午网络,获得专属《策划方案》及报价

                      咨询相关问题或预约面谈,可以通过以下方式与我们联系

                      业务热线:18574395938 / 大客户专线:18574395938