jQuery

jQueryプラグイン「VIDE」で動画を全画面背景で表示する方法

2022年5月7日 by single コメントはまだありません

今回はjQueryプラグイン「VIDE」を利用して、全画面背景を動画にする方法を紹介します。

jQueryプラグイン「VIDE」で動画を全画面背景で表示する方法

インストール方法

まず、トップページから「Download」ボタンをクリックしてください。

するとGitHubのページに行きますので「Source code (zip)」のリンクを押すと、ライブラリ一式格納された書庫ファイルをダウンロードすることができます。

書庫ファイルを解凍すると以下のようなファイルが展開されます。

導入方法

JSファイルインクルード

まず、jQueryのライブラリを読み込んでください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

次に、VIDEのJSファイルを読み込んでください。

ダウンロードした書庫ファイルの中にある「dist」フォルダ直下にJSファイルがありますので、どちらかを読み込むようにしてください。

<script src="/assets/Vide-0.5.1/dist/jquery.vide.min.js"></script>

実装方法

実装方法にはHTMLマークアップで対応できる方法とJavascriptでVIDEを初期化する方法があります。

HTMLマークアップ

   <body style="width: 100%; height:100%; border:0;"
          data-vide-bg="/assets/Vide-0.5.1/examples/video/ocean.mp4"
          data-vide-options="playbackRate:1, autoplay: true, loop: true, muted: true, position: 0% 0%"
   >

   </body>

「data-vide-bg」に背景に設定したい動画や画像のパスを指定してください。

また「data-vide-optiions」にはオプションを指定してください。

VIDE初期化

   <body id="myBlock">
      <script>
         $('#myBlock').vide('/assets/Vide-0.5.1/examples/video/ocean.mp4');
      </script>
   </body>

JavaScriptで初期化することでも利用することができます。

その場合は、jQueryのセレクタで対象のオブジェクトを指定し、videオブジェクト指定してください。

第１パラメータは、背景に設定したい動画や画像のパスを指定してください。

第２パラメータには、オプションを指定してください。指定しない場合には、デフォルトで実行されます。

HTMLコード

HTMLマークアップの場合

<!DOCTYPE html>
<html>
   <head>
      <title>vide demo</title>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      <!-- jQuery -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <!-- VIDE -->
      <script src="/assets/Vide-0.5.1/dist/jquery.vide.min.js"></script>
      <style type="text/css">
         html,
         body {
             height: 100%;
             margin: 0;
             padding: 0;
         }
      </style>
   </head>
   <body style="width: 100%; height:100%; border:0;"
          data-vide-bg="/assets/Vide-0.5.1/examples/video/ocean.mp4"
          data-vide-options="playbackRate:1, autoplay: true, loop: true, muted: true, position: 0% 0%"
   >

   </body>
</html>

Javascirpt VIDE初期化の場合

<!DOCTYPE html>
<html>
   <head>
      <title>vide demo</title>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      <!-- jQuery -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <!-- VIDE -->
      <script src="/assets/Vide-0.5.1/dist/jquery.vide.min.js"></script>
      <style type="text/css">
         html,
         body {
             height: 100%;
             margin: 0;
             padding: 0;
         }
      </style>
   </head>
   <body id="myBlock">
      <script>
         $('#myBlock').vide('/assets/Vide-0.5.1/examples/video/ocean.mp4');
      </script>
   </body>
</html>

デモ

オプション

HTMLで「data-vide-options」属性を指定、または、JavascriptでVIDE初期化時にオプションを指定できます。

指定できるオプションとデフォルト値は以下のページに記載されています。

なお、「volume」「playbackRate」「muted」「loop」「autoplay」はHTMLタグの「video」タグで利用される属性になります。

詳しくは以下のページをご覧ください。

その他のオプションを紹介しておきます。

position

CSSのプロパティ「background-position」に似たプロパティになります。

デフォルトは「’50% 50%’」になります。

posterType

動画読み込み中に表示される画像のタイプを指定できます。

デフォルトは「detect」で自動識別となります。

「none」を指定すれば動画読み込み中には何も表示されなくなります。

その他「jpg」「gif」「pgn」などの拡張子を指定することができます。

resizing

「true」を指定すると表示サイズに合わせて、背景動画の大きさを自動調整してくれるようになります。デフォルトは「true」です。

bgColor

VIDEに設定されているDIVオブジェクトの「background-color」を指定できるオプションです。
デフォルトは「transparent」で透明となっています。

className

VIDEに設定されているDIVオブジェクトのCSSクラスを指定できます。