ホームページ > 記事 > ウェブフロントエンド > HTML5 のクールなレスポンシブビデオ背景アニメーション特殊効果
簡単なチュートリアル
これは、クールな 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('#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 中国語 Web サイト (www.php.cn) をご覧ください。