Bideo.js
HTML5超酷响应式视频背景动画特效
Brief Tutorial
This is a cool HTML5 responsive video background animation effect. This video background can adapt the video to the size of the screen to create cool dynamic video background effects.
Usage method
Introduce the bido.js file into the page.
HTML structure
The basic HTML structure of the video background animation special effects is as follows.
Bideo.js
HTML5超酷响应式视频背景动画特效
JavaScript
At the bottom of the page, use the following js code to initialize the video background animation effects.
(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'; } }); }());
The above is the content of HTML5 cool responsive video background animation special effects. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
