[JS]動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide

サイト構築 -JavaScript

Post on:2014年7月25日

Videのデモ

デモでは、動画がブラウザいっぱいの背景として表示されています。
モダンブラウザ、IEは9+でご覧ください。

デモページ

iOSでは動画はネイティブのプレイヤーのみ再生可能なので、静止画像が表示されます。Androidでは一部の機種で動画が再生されてしまいますが、基本的には静止画像が表示されます。

Videの使い方

Step 1: 外部ファイル

当スクリプトとjquery.jsを外部スクリプトとして記述します。

<body>
  ...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/jquery.vide.min.js"></script>
</body>

Step 2: HTML

動画を背景として配置させるエレメントにdata属性（data-vide-bg）を加えます。

<!-- ブラウザいっぱいの場合 -->
<body data-vide-bg="path/to/video">

<!-- divの場合 -->
<div data-vide-bg="path/to/video">

videoフォルダ内には、動画と代替画像を用意しておきます。

video.mp4
video.ogv
video.webm
video.jpg（代替画像）

代替画像は.jpg, .png, .gifが利用できます。

Step 3: オプション

data-vide-optionsを使い、動画のループ再生やポジションを設定できます。

<div style="width: 1000px; height: 500px;"
    data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>

Step 4: JavaScript

スクリプトを使用して初期化したり、オプションを設定することもできます。

$("#yourElement").vide({
    volume: 1,
    playbackRate: 1,
    muted: true,
    loop: true,
    autoplay: true,
    position: "50% 50%" // Alignment
});