酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

html5

旗下栏目: html css xml html5 DW bootstrap Frontpage教程

Html5实现首页动态视频背景的方法

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-09-26
本篇文章主要介绍了Html5实现首页动态视频背景的方法,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。
话不多说,先看效果图:



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

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

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

html代码:

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

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

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

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;  
       }

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

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

那么如果我们想要添加内容到页面上怎么办呢?
 
 
<video id="v1" autoplay loop muted>
          <source src="./video2.mp4" type="video/mp4"  />
    </video>   
    <h1 style="color:white">123465</h1>

是的,在video标签外部添加,然后我们的效果图就是这样的(由于博客对图片大小有限制,所以截屏时间没有很长):



是不是用H5实现这种动态视频背景效果很简单?赶紧一起来试试吧!!!

原文链接:https://www.jb51.net/html5/694978.html

最新更新