Fullscreen HTML5 Background Video- 好用的 javascript 網頁背景影片幻燈片播放套件

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'
});

再把裡面換成要播放的影片網址就好。