HTML5でビデオの背景を設定する方法の紹介

Web ページの背景としてビデオを使用する必要があることがよくありますが、その設定が満足できないことがよくあります。今日設定しましたが、基本的に要件を満たすことができます。細かい点がいくつかあるかもしれません。うまくいきすぎています。わかりました、ご指摘いただければ、一緒に前進できると思います

ステップ 1: 準備

仕事をうまくやり遂げたい場合は、 、まず道具を研ぐ必要があります。まずビデオを準備する必要があります。写真に示すように、次のようなビデオを用意しました。

美しいですね。もちろん、私ほど美しくはありません。

第 2 ステップ: ビデオを紹介します。

ここでは、video/ タグを使用して、次のパスを記述する必要があります。ソース内のビデオ、autoplay は自動的に再生するために使用され、muted はミュートするために使用され、loop はループで再生するために使用されます。追加したくない場合は、個人的な希望に応じて追加できます。それを失うことになります

<video id="v1" autoplay muted loop style="width: 100%">
    <source  src="mp4/loading.mp4">
</video>

3 番目のステップ: 画面に合わせてビデオを調整します

上記のステップではニーズを満たすことができません。現時点では、次のような問題があることがわかります。スクロール バーをクリックすると、表示したいコンテンツがビデオによってブロックされますが、これは私たちが望む結果とは程遠いです。心配しないでください、私はここにいます

video{
          position: fixed;
          right:0;
          bottom: 0;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          z-index: -9999;
          /*灰色调*/
          /*-webkit-filter:grayscale(100%)*/
 
      }

これで大丈夫です、-webkit-filter : グレースケール (100%) は色調を調整するために使用され、img にも適用されます。

ステップ 4: 動画の再生速度

playbackRate を使用できます。ビデオの属性を使用してビデオの再生速度を制御します。背景ビデオを低速で再生したい場合は、次の JavaScript

<script>
    var video= document.getElementById(&#39;v1&#39;);
    video.playbackRate = 0.5;
</script>

OK、クールな背景を設定してください

プログラミング関連の知識をさらに詳しく知りたい場合は、プログラミング入門をご覧ください。 ！

以上がHTML5でビデオの背景を設定する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。