互联网知识

精准传达 • 价值共享

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

网站建设 > 互联网知识

查看其它板块

HTML5实现首页动态视频背景

作者：狐灵科技 | 2020-03-29 23:43 |点击：

之前写过一篇文章来记录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>

 

 

如没特殊注明，文章均为狐灵科技原创,转载请注明   "HTML5实现首页动态视频背景
相关推荐
返回首页 了解更多建站资讯

—— 微信公众号 ——

热门标签

上一篇———————

HTML 5 video 视频标签讲解

下一篇———————

浅谈网站安全的重要性—利用伪静态禁止目录运行PHP
多一份免费策划方案，总有益处。

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

立即询问 技术总监在线 15523356218
网站设计 品牌营销

多一份参考，总有益处

联系狐灵科技，免费获得专属《策划方案》及报价

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

业务热线：15082661954 / 大客户专线：15523356218

在线咨询 在线咨询 提交需求

关于狐灵科技

+

狐灵致力于互联网品牌建设与网络营销，专业领域包括 网站建设、 SEO优化、移动互联网营销、高端网站建设、高端网站设计、品牌网站定制开发、营销策划推广电子商务、移动互联网营销、 为不同类型的客户提供良好的互联网应用定制解决方案，我们将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供一体化全方位的互联网品牌整合方案！

我们的优势

量身打造个性化网站制作

代码深度符合SEO优化

一站式企业网站建设服务

前沿视觉设计、研发能力

重庆网站建设公司

多项网站设计传播大奖

营销型网站建设专家

自主研发网站管理系统

B2C电商网站建设供应商

完善的售后服务体系

我们的不同

+

在我们的对手消耗大量的时间停留在碎片化的互联网设计或者程序实现的时候，我们已经开始把数字化品牌建设和网络传播进行了整合。我们提供从前期的网站品牌分析策划、网站设计、创意表现、系统开发以及后续网站运营反馈建议等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,为所有谋求长远发展的企业品牌贡献全力！

友情链接 交换友情链接 交换友情链接 展开

公司地址：重庆市九龙坡杨家坪重百大楼21-8 | 业务热线：15082661954

Copyright © 2017-2020 Fox spirit Network. 狐灵科技 版权所有 | 渝ICP备19005721号-1

专业团队为您提供 重庆网页设计, 品牌网站设计,营销型网站制作,SEO优化关键词排名推广等服务,建网站就找狐灵科技！ | TAG标签 | 网站建设地图 | 网站地图

业务咨询 业务咨询 业务热线 15082661954 提交需求 官方微信 狐灵网络科技官方微信