HTML5 のクールなレスポンシブビデオ背景アニメーション特殊効果-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML5 のクールなレスポンシブビデオ背景アニメーション特殊効果

黄舟

Jan 18, 2017 pm 02:08 PM

簡単なチュートリアル

これは、クールな HTML5 レスポンシブビデオ背景アニメーション効果です。このビデオ背景は、ビデオを画面のサイズに適応させて、クールでダイナミックなビデオ背景効果を作成できます。

使用方法

bido.js ファイルをページに導入します。

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

ログイン後にコピー

HTML構造

このビデオ背景アニメーション特殊効果の基本的なHTML構造は次のとおりです。

<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

ページの下部で、次の JS コードを使用してビデオの背景アニメーション効果を初期化します。

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

ログイン後にコピー

上記は、HTML5 のクールなレスポンシブビデオ背景アニメーション特殊効果のコンテンツです。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。