插件介绍
这是一款HTML5超酷响应式视频背景动画特效。该视频背景可以将视频自适应屏幕的大小，制作出炫酷的动态视频背景效果。

简要教程
这是一款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’;
}
});
}());

在线预览 网盘下载

网盘下载密码：brd3