Use BIDEO.JS to easily add a full-screen background video in html or vue pages

Use bideo.js to add a full-screen background video very easily

1. Introduce bideo.js, take the vue project as an example

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

2. use

<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. More
   Demo: bideo.js .
   GitHub address: Source .