menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/01/18
  • JQuery

ブラウザ背景で動画再生をするJS「Vide.js」の使い方

ウェブページの背景全画面でムービーが再生されているサイト、Vide.jsを使えば簡単に実現ができます。
videjs

使用方法

ダウンロード

jquery.vide.min.js (github)

準備するファイル

・jquery.js
・jquery.vide.js

・動画、画像ファイル
 path/video/ocean.mp4
 .ocean.ogv
 .ocean.webm
 .ocean.jpg
 .ocean.png

 

フォルダ(サンプルはvideo)を作成しその中に各拡張子のファイルを入れる。

外部ファイルの読み込み

<head>〜<head>内にjQueryとダウンロードした「jquery.vide.min.js」ファイルを読み込みます。

HTML

・全画面の場合は「body」へ
・一部に適用する場合は「div」などの要素へ
・「.mp4」などの拡張子は記述しない。

StyleSheet

div要素の場合、max-height、min-heightを設定していますが縦幅が固定の場合はheightで設定してください。

以上で設定終了です。

オプションもいくつか用意されており、ループや自動再生なんかも簡単に設定できたりしますのでオススメです。

コメントを残す

メールアドレスが公開されることはありません。




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11