使用BIDEO.JS在html或vue页面中简单的添加全屏背景视频

使用bideo.js 可以非常容易地添加全屏背景视频

1. 引入bideo.js 以vue 项目为例

import Bideo from '../assets/videobg/bideo.js'; // 文件路径

2. 使用

<template>
	<div class="view-login">
		<video class="video" id="background_video" loop muted></video>
	</div>
</template>

created() {
    
    
	this.video();
},

video() {
    
    
			var bv = new Bideo();
			var that = this;
			// 属性或方法的使用可以参考官方文档 
			bv.init({
    
    
					videoEl: document.querySelector('#background_video'),  // 视频元素
					container: document.querySelector('body'), // 容器
					resize: true,
					isMobile: window.matchMedia('(max-width: 768px)').matches,
					src: [{
    
    
						src: '/static/video/hefei.mp4',
						type: 'video/mp4'
					}] // 视频文件路径
		});
},

3. 更多
   演示地址: bideo.js.
   github地址: 源码.