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

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

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

path/
├── to/
│   ├── video.mp4
│   ├── video.ogv
│   ├── video.webm
│   └── video.jpg

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

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

$("#myBlock1").vide("path/to/video");
$("#myBlock2").vide("path/to/video", {
...options...
});

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




    
    Body background example