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

Post on:2014年7月25日

.mp4, .webm など、動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグインを紹介します。

デスクトップでは動画が再生され、スマホでは仕様のため代替の静止画像が表示されます。

サイトのキャプチャ

Vide
Vide -GitHub

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
});

sponsors

top of page

©2024 coliss