背景全面を動画にするjQueryプラグイン「VIDE」の使い方

背景を動画にしておしゃれなホームページにしたい

浦島です、今回は簡単に背景全面を動画にるプラグインjQuery「VIDE」を紹介します。

まずは公式サイトでサンプルをご覧ください

ムービーが読み込まれるまでの間に静止画を表示させておくことが可能です。その場合は同じフォルダ内に「.png」形式の同名の画像ファイルを用意しておくとプラグインが自動に読み込んでくれます。
もし「.png」の画像が存在しない場合、続いて「.jpg」「.gif」の画像ファイルを検出します。

ファイルを用意

githubからファイルをダウンロードしてきます。
今回必要なのは以下の2点です。

最終的にこうなればOK

コードの書き方

 

最終的なコードはこちら

たったのこれだけで背景を動画にすることが可能です。
非常に簡単ですね。

VIDEのオプション

オプション 説明 初期値
volume 動画の音量を指定。
mutedがfalseの場合のみ有効
1
playbackRate 動画の再生スピードを指定する
10を指定すると10倍速になる
1
muted 音声出力の有無をしてできる。 true
loop 動画を繰り返し再生する。 true
autoplay ページ読み込み時に動画を自動再生する。 true

以上、背景全面を動画にするjQueryプラグイン「VIDE」の使い方でした。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PAGE TOP