当前位置:首页 > Web开发 > 正文

用到的是html5的新标签video html : video autoplayloopposter="polina.j

2024-03-31 Web开发

github项目地点:https://github.com/Ethan997/Video-background-page

想要实现这种效果很容易,只需要分明H5的video, 凭据我的法式一步一步来就可以了~

首先要制作我们的页面,用到的是html5的新标签video

html :

<video autoplayloopposter="polina.jpg"class="bgvid"id="bgvid"> <source src="http://cdn.moji.com/websrc/video/video621.mp4" type="video/mp4"> </video>

css样式也没有什么好说的,,只是要让视频充塞屏幕、循环、无声、直接播放、隐藏按钮和不反复就可以了。

css:

body{ background-color:gray; background:url("http://cdn.moji.com/websrc/video/video621.mp4") no-repeat center0px; } video#bgvid { position: fixed; right:0; bottom:0; min-width:100%; min-height:100%; width: auto;height: auto;z-index:-100; background-size: cover; }

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/32009.html