よくある「背景でムービーが再生されてる奴」を実現する(Vide.js)

Pocket

開くと背景で全画面でムービーが再生されているサイト、よくありますよね。それなりにインパクトがあるし、ちょっと使ってみたいと思うことも多いはず。Videというライブラリを使えば簡単に実現ができます。

使い方

ムービーが再生されるまでに表示しておく静止画(jpg)と、動画ファイル(mp4, ogv, webm)を同じパスに配置しておきます。HTML5でムービーを再生するのですが、ブラウザによって再生できるファイルが異なるので、異なる拡張子で同じムービーファイルを作成しておく必要があります。

再生場所の指定はHTMLで行う以下のような方法と、

jQueryで行う以下のような方法があります。

一番手軽に動画の全画面表示を実現するなら、このサンプルのようにbodyタグにdata-vide-bg属性の設定を行うと良いです。

Vide – Easy as hell jQuery plugin for video backgrounds