简要教程
这是一款html5超酷响应式视频背景动画特效。该视频背景可以将视频自适应屏幕的大小，制作出炫酷的动态视频背景效果。
使用方法
在页面中引入bideo.js文件。
<script src="js/bideo.js"></script>
html结构
该视频背景动画特效的基本html结构如下。
<div id="container">
<video id="background_video" loop muted></video>
<div id="video_cover"></div>
<div id="overlay"></div>
<div id="video_controls">
<span id="play">
<img src="play.png">
</span>
<span id="pause">
<img src="pause.png">
</span>
</div>
<section id="main_content">
<div id="head">
<h1>bideo.js</h1>
<p class="sub_head">html5超酷响应式视频背景动画特效</p>
</div>
</section>
</div>
javascript
在页面底部，使用下面的js代码来初始化该视频背景动画特效。
(function () {
var bv = new bideo();
bv.init({
// video element
videoel: document.queryselector('#background_video'),
// container element
container: document.queryselector('body'),
// resize
resize: true,
// autoplay: false,
ismobile: window.matchmedia('(max-width: 768px)').matches,
playbutton: document.queryselector('#play'),
pausebutton: document.queryselector('#pause'),
// array of objects containing the src and type
// of different video formats to add
src: [
{
src: 'vedio.mp4',
type: 'video/mp4'
},
{
src: 'night.webm',
type: 'video/webm;codecs="vp8, vorbis"'
}
],
// what to do once video loads (initial frame)
onload: function () {
document.queryselector('#video_cover').style.display = 'none';
}
});
}());
以上就是html5超酷响应式视频背景动画特效的内容。