HTML5超酷响应式视频背景动画特效

<script src="js/bideo.js"></script>

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

(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';
 }
 });
}());