開くと背景で全画面でムービーが再生されているサイト、よくありますよね。それなりにインパクトがあるし、ちょっと使ってみたいと思うことも多いはず。Videというライブラリを使えば簡単に実現ができます。
使い方
ムービーが再生されるまでに表示しておく静止画（jpg）と、動画ファイル（mp4, ogv, webm）を同じパスに配置しておきます。HTML5でムービーを再生するのですが、ブラウザによって再生できるファイルが異なるので、異なる拡張子で同じムービーファイルを作成しておく必要があります。
|
1 2 3 4 5 6 |
path/ ├── to/ │ ├── video.mp4 │ ├── video.ogv │ ├── video.webm │ └── video.jpg |
再生場所の指定はHTMLで行う以下のような方法と、
|
1 2 3 |
<div style="width: 1000px; height: 500px;" data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%"> </div> |
jQueryで行う以下のような方法があります。
|
1 2 3 4 |
$("#myBlock1").vide("path/to/video"); $("#myBlock2").vide("path/to/video", { ...options... }); |
一番手軽に動画の全画面表示を実現するなら、このサンプルのようにbodyタグにdata-vide-bg属性の設定を行うと良いです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Body background example</title> <style> html, body { margin: 0; width: 100%; height: 100%; } </style> </head> <body data-vide-bg="video/ocean"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="../libs/jquery/jquery-1.11.1.min.js"><\/script>')</script> <script src="../src/jquery.vide.js"></script> </body> </html> |