HTML5超酷響應式影片背景動畫特效

簡短教學

這是一款HTML5超酷響應式影片背景動畫特效。這個影片背景可以將影片自適應螢幕的大小，製作出酷炫的動態影片背景效果。

使用方法

在頁面中引入bideo.js檔案。

 HTML結構

此影片背景動畫特效的基本HTML結構如下。

  
  

  

 
  

    
      
    
    
      
    
  
 
  

    

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

JavaScript

在頁面底部，使用下面的js程式碼來初始化該影片背景動畫特效。

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

以上就是HTML5超酷響應式影片背景動畫特效的內容，更多相關內容請關注PHP中文網（www.php.cn）！