Effets spéciaux d'animation d'arrière-plan vidéo réactif et cool HTML5

Bref tutoriel

Il s'agit d'un effet d'animation d'arrière-plan vidéo réactif HTML5 sympa. Cet arrière-plan vidéo peut adapter la vidéo à la taille de l'écran pour créer des effets d'arrière-plan vidéo dynamiques et sympas.

Utilisation

Introduisez le fichier bido.js dans la page.

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

Structure HTML

La structure HTML de base des effets spéciaux d'animation d'arrière-plan vidéo est la suivante.

<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>

JavaScript

En bas de la page, utilisez le code js suivant pour initialiser les effets d'animation d'arrière-plan de la vidéo.

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

Ce qui précède est le contenu des effets spéciaux d'animation d'arrière-plan vidéo réactifs HTML5. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !