全国服务热线:4008-888-888

技术知识

Html5完成主页动态性视頻情况的示例编码

话很少说,先看实际效果图:

酷炫吗?你想完成这类动态性视頻做为情况的主页吗?来,1起来学习培训,本文将带你1起完成H5动态性视頻情况;

最先在网上找1段清楚的视頻免费下载下来,最好是是MP4文件格式的;

免费下载好了以后大家新建1个html文档来写编码:

html编码:

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

1个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:⑴1
        }  
        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标识外界加上,随后大家的实际效果图便是这样的(因为blog对照片尺寸比较有限制,因此截屏時间沒有很长):

 

是否用H5完成这类动态性视頻情况实际效果很简易?赶快1起来试试吧!!!

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服