简要教程
这是一款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）！
