背景を動画にしておしゃれなホームページにしたい
浦島です、今回は簡単に背景全面を動画にるプラグインjQuery「VIDE」を紹介します。
まずは公式サイトでサンプルをご覧ください
ムービーが読み込まれるまでの間に静止画を表示させておくことが可能です。その場合は同じフォルダ内に「.png」形式の同名の画像ファイルを用意しておくとプラグインが自動に読み込んでくれます。
もし「.png」の画像が存在しない場合、続いて「.jpg」「.gif」の画像ファイルを検出します。
|
1 2 3 4 5 6 |
path/ ├─ movie/ │ ├─ sample.mp4 │ ├─ sample.ogv │ ├─ sample.webm │ └─ sample.png |
ファイルを用意
githubからファイルをダウンロードしてきます。
今回必要なのは以下の２点です。
最終的にこうなればOK
コードの書き方
|
1 2 3 4 5 6 |
<body data-vide-bg="video/ocean"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="../libs/jquery/dist/jquery.min.js"><\/script>')</script> <script src="jquery.vide.js"></script> </body> |
最終的なコードはこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html, body { margin: 0; width: 100%; height: 100%; } </style> </head> <body data-vide-bg="video/ocean"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="../libs/jquery/dist/jquery.min.js"><\/script>')</script> <script src="jquery.vide.js"></script> </body> </html> |
たったのこれだけで背景を動画にすることが可能です。
非常に簡単ですね。
VIDEのオプション
| オプション | 説明 | 初期値 |
| volume | 動画の音量を指定。 mutedがfalseの場合のみ有効 |
1 |
| playbackRate | 動画の再生スピードを指定する 10を指定すると10倍速になる |
1 |
| muted | 音声出力の有無をしてできる。 | true |
| loop | 動画を繰り返し再生する。 | true |
| autoplay | ページ読み込み時に動画を自動再生する。 | true |
以上、背景全面を動画にするjQueryプラグイン「VIDE」の使い方でした。
Follow me!
