BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

ホームページのダイナミックな動画背景を実現するHTML5サンプルコード

2022-01-28 19:37:26

さっそく、その結果を見てみましょう。

かっこいい？このダイナミックな動画をホームページの背景として実装してみたいと思いませんか？是非、一緒に学びましょう、この記事では、H5ダイナミックビデオの背景を実装するために沿ってあなたを取るでしょう;。

まずネットでわかりやすい動画を探してダウンロードします。できればMP4形式がいいです。

ダウンロードしたら、コードを書くために新しいhtmlファイルを作成します。

htmlのコードです。 

<video id="v1" autoplay loop muted>
              <source src=". /video2.mp4" type="video/mp4" />
        </video>

video タグで囲み、source はソースファイル、autoplay 属性は自動再生、loop はループ再生、muted は無音再生に対応します。

autoplay属性がない場合は、自動再生ができず、ページが黒く表示されます。

のcssコードです。 

 *{  
            margin: 0px;  
            padding: 0px;  
        }  
        video{  
            position: fixed;  
            right: 0px;  
            bottom: 0px;  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
            /*add filter*/
            /*filter: blur(15px); //background blur setting */
            /*-webkit-filter: grayscale(100%);*/  
            /*filter:grayscale(100%); // background grayscale setting */  
            z-index:-11
        }  
        source{  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
        }

cssのコードは、主にフルスクリーン再生の効果を得るための位置決めとズーム、主にビデオの幅と高さの設定など、そして、下部に配置できるようにz-indexに値を与えることを忘れないでください、それは0未満である限り大丈夫です、何の影響もありません。

これでダイナミックビデオの背景は完成です。再生速度を設定したい場合は、jsコード（videoタグにid="v1"属性）を追加してください。 

 var video= document.getElementById('v1');
            video.playbackRate = 1.5;

では、ページにコンテンツを追加したい場合はどうすればよいのでしょうか。 

    <video id="v1" autoplay loop muted>
              <source src=". /video2.mp4" type="video/mp4" />
        </video>    
        <h1 style="color:white">123465</h1>

はい、videoタグの外に追加して、以下のような結果画像になりました（ブログでは画像サイズに制限があるため、スクリーンショットはあまり長くありません）。

H5でこのダイナミックなビデオ背景効果を実現するのは簡単だと思いませんか？ぜひ試してみてください。

以上、今回の記事を読んで、勉強していただき、さらにScript Houseを応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します