Fullscreen HTML5 Background Video 是一個好用的 javascript 網頁背景影片幻燈片播放套件，使用方法如下：
先到官網下載 js 後並讀入：
import backgroundVideo from './background-video.js';
準備一個放影片的 html
<div id="video_container"></div>再準備一個放置封面的 html
<div id="video_cover"></div>撰寫 css
#video_cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('cover.jpg') no-repeat;
background-size: cover;
background-position: center;
}
初始化 backgroundVideo
const VIDEO_CONTAINER = document.querySelector('#video_container');
const VIDEO_COVER = document.querySelector('#video_cover');
new backgroundVideo({
container: VIDEO_CONTAINER,
src: [{
src: '1',
types: ['mp4'],
},
{
src: '2',
types: ['mp4'],
},
{
src: '3',
types: ['mp4'],
},
{
src: '4',
types: ['mp4'],
}
],
onLoad: () => VIDEO_COVER.style.display = 'none'
});
再把裡面換成要播放的影片網址就好。
