ホームページでビデオを全画面で再生したいですか?このビデオは Web ページの背景として使用されており、Web コンテンツの通常の閲覧には影響しません。それでは、あなたのニーズに合った Javascript ライブラリがあることをお知らせします。それが Bideo.js です。
特性自動調整: Bideo.js は、現在のブラウザ ウィンドウのサイズに応じてビデオ サイズを自動的に調整します。ブラウザ ウィンドウが調整されると、モバイル側と PC 側の両方がビデオ サイズに合わせて自動的に調整されます。背景として使用したり、全画面で表示したりできます。
オーバーレイ: ビデオを Web ページの背景として使用した後、任意の HTML コンテンツをビデオの上に配置できます。
ビデオ カバー: ページを開くと、ビデオが読み込まれるまでに数秒かかる場合があります。その後、画像をビデオのカバーとして設定し、読み込まれるまで待ってから再生します。
HTML次の HTML コードをページの本文に追加します。 <video> タグはビデオの読み込みに使用され、属性のloopはビデオのループを指し、muted はミュート モード、つまり音量が 0 であることを示します。 #video_cover はデフォルトのビデオ カバーです。 #overlay は、他のすべてのページ コンテンツが表示されるマスク レイヤです。
<div id=container> <video id=background_video ループミュート></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>HTML5 は全画面ビデオの背景を簡単に実装します - Bideo.js</h1> <p class=sub_head>ページに全画面の背景ビデオを簡単に追加できる Javascript ライブラリ</p> <p class=info>(ビデオの読み込みに時間がかかるので、しばらくお待ちください。)</p> </div> </section></div>
また、携帯電話に適した、ビデオの再生と一時停止を制御するために使用される #video_controls も追加しました。最後に、次のセクションで表示する HTML コンテンツを追加できます。
CSSCSS も重要です。最も注意すべき点は、#container と #background_video の設定です。次の CSS コードは説明なしで直接取得できます。
* { マージン: 0; パディング: 0; } HTML、ボディ { 幅: 100%; 高さ: 100%; }#container { 位置: 左: 0; : 0; 下: 0; 高さ: 100%;}#background_video { 位置: 絶対; 左: 50%; 変換: -50%); オブジェクトフィット: 高さ: 100%; 幅: 100%; 位置: 絶対; 高さ: 100%; -repeat; 背景サイズ: カバー; 背景位置: 中央; 位置: 上: 0; 左: 0; rgba(0,0,0,0.5);} JavaScriptまず、Bideo ライブラリをロードします。
<script src=bideo.js></script>
次に、bido: new Bideo() をインスタンス化し、読み込みを直接初期化し、次のオプションを設定します。
(function () { var bv = new Bideo(); bv.init({ // ビデオ要素 videoEl: document.querySelector('#background_video'), // コンテナ要素container: document.querySelector('body'), / / 適応調整サイズ変更: true, // 自動再生: false, isMobile: window.matchMedia('(max-width: 768px)').matches, playButton: document.querySelector('#play'), stopButton: document.querySelector('#pause'), // ビデオ ソースをロードし、実際のビジネスに従って独自のビデオ ソース ファイルを置き換えます src: [ { src: 'http://ak4.picdn.net/shutterstock/videos/4170274/preview/stock-footage-Beautiful-girl-lying-on-the-meadow-and-dreaming-enjoy-nature-close-up-slow-motion -footage.mp4'、タイプ: 'video/mp4' }、{ src: 'night.webm'、タイプ: 'video/webm;codecs=vp8, vorbis' } ], // ビデオがロードされると、ビデオのカバーは非表示になります onLoad: function () { document.querySelector('#video_cover').style.display = 'none '; } } );}());このようにして、高見えする背景ビデオ ページが完成します。オンライン デモ DEMO の閲覧とソース コードのダウンロードへようこそ。 Bideo.js の詳細については、github プロジェクトのアドレス https://github.com/rishabhp/bideo.js をご覧ください。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。