開くと背景で全画面でムービーが再生されているサイト、よくありますよね。それなりにインパクトがあるし、ちょっと使ってみたいと思うことも多いはず。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
