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

<script src="js/bideo.js"></script>

<div id="container">

  <video id="background_video" loop muted></video>

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

  <div id="overlay"></div>

  <div id="video_controls">

    <span id="play">

      <img src="play.png">

    </span>

    <span id="pause">

      <img src="pause.png">

    </span>

  </div>

  <section id="main_content">

    <div id="head">

      <h1>Bideo.js</h1>

      <p class="sub_head">HTML5超酷响应式视频背景动画特效</p>

    </div>

  </section>

</div>

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

    }

  });

}());