Dynamic Background Video Slideshow In JavaScript

Preview:

Description:

Just another responsive full-size background video library that automatically plays the next one when the current video playback is finished.

How to use it:

1. Download the package and import the backgroundVideo as a module.

import backgroundVideo from './background-video.js';

2. Create a container in which you want to place the background video.

<div id="video_container"></div>

3. Create a ‘cover’ container to display a cover image before the video is ready to play.

<div id="video_cover"></div>

#video_cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('cover.jpg') no-repeat;
  background-size: cover;
  background-position: center;
}

4. Initialize the backgroundVideo and specify an array of HTML5 videos for backgrounds.

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