Bideo.js
HTML5超酷响应式视频背景动画特效
简要教程
这是一款HTML5超酷响应式视频背景动画特效。该视频背景可以将视频自适应屏幕的大小,制作出炫酷的动态视频背景效果。
使用方法
在页面中引入bideo.js文件。
HTML结构
该视频背景动画特效的基本HTML结构如下。
Bideo.js
HTML5超酷响应式视频背景动画特效
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超酷响应式视频背景动画特效的内容,更多相关内容请关注PHP中文网(www.php.cn)!