HTML5 cool responsive video background animation special effects

Brief Tutorial

This is a cool HTML5 responsive video background animation effect. This video background can adapt the video to the size of the screen to create cool dynamic video background effects.

Usage method

Introduce the bido.js file into the page.

HTML structure

The basic HTML structure of the video background animation special effects is as follows.

  
  

  

 
  

    
      
    
    
      
    
  
 
  

    

      
Bideo.js
      
HTML5超酷响应式视频背景动画特效
    
  

JavaScript

At the bottom of the page, use the following js code to initialize the video background animation effects.

(function () {
 
  var bv = new Bideo();
  bv.init({
    // Video element
    videoEl: document.querySelector('#background_video'),
 
    // Container element
    container: document.querySelector('body'),
 
    // Resize
    resize: true,
 
    // autoplay: false,
 
    isMobile: window.matchMedia('(max-width: 768px)').matches,
 
    playButton: document.querySelector('#play'),
    pauseButton: document.querySelector('#pause'),
 
    // Array of objects containing the src and type
    // of different video formats to add
    src: [
      {
        src: 'vedio.mp4',
        type: 'video/mp4'
      },
      {
        src: 'night.webm',
        type: 'video/webm;codecs="vp8, vorbis"'
      }
    ],
 
    // What to do once video loads (initial frame)
    onLoad: function () {
      document.querySelector('#video_cover').style.display = 'none';
    }
  });
}());

The above is the content of HTML5 cool responsive video background animation special effects. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!