PopupVideoの概要

PopupVideo は、jQuery と Colorbox を使い、ビデオプレイヤーをポップアップ表示させます。

機能紹介

最新版のダウンロード

jquery.popupvideo_0.2.1.zip

更新履歴

v.0.2.1 - 2015/2/24
pv_play() で Colorbox() の呼び出し方を訂正しました。
v.0.2.0 - 2015/2/23
関数名を pv_colorbox() から pv_player() に変更しました。
pv_player() でプレイヤーの設定変更が行えるようになりました。
ドキュメントを整理。
v.0.1.2 - 2015/2/22
pv_init() で初期設定の変更が行えるようになりました。
v.0.1.0 - 2015/2/21
初版リリース。

基本的な使い方

ここでは、PopupVideo の基本的な使い方を説明します。
まずは、jQuery と Colorbox が使えるヘッダーを準備し、PopupVideo の CSS と Javascript を読み込みます。

<!DOCTYPE html>
<html>
<head>
<title>/* ここにタイトル */</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.97">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/example1/colorbox.min.css">
<link rel="stylesheet" href="jquery.popupvideo.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox-min.js"></script>
<script src="jquery.popupvideo.js"></script>
<script>
$(function(){
  $.pv_init();
  $("img.pv_poster").pv_player();
});
</script>
</head>

ヘッダーの最後で $.pv_init() で初期化し、pv_player() で全てのポスター画像にプレイヤーを割り当てます。

<body>
  <div>
    <img width="272" height="153" class="pv_poster" src="http://airwhite.net/popupvideo/a.png" title="地上からの夜光雲">
    <img width="272" height="153" class="pv_poster" src="http://airwhite.net/popupvideo/b.png" title="ガラスの風鈴">
    <img width="272" height="153" class="pv_poster" src="http://airwhite.net/popupvideo/c.png" title="天神祭の花火(大阪・淀川)">
  </div>
</body>
</html>

<div>要素の中にポスター画像を入れます。
ポスター画像には"pv_poster"クラスを割り当てます。title属性を指定するとプレイヤーが起動した時に表示されます。

設定を変更する方法

初期設定の変更

$.pv_init() のオプションの使い方は次の通りです。

$.pv_init({ width: 640, height: 360 });

$.pv_init() では、以下のキーを使って初期設定を変更することが出来ます。

キー初期値説明
width640ビデオの横幅
height360ビデオの縦幅
mp4truemp4形式のビデオを扱う
webmfalsewebm形式のビデオを扱う
oggfalseogg形式のビデオを扱う
icontrueポスター画像にアイコンを表示する
rollovertrueポスター画像でロールオバーを行う
autoplaytrueビデオを自動再生する
delay1000自動再生時の待ち時間(ミリ秒)
currentvideo {current} of {total}案内用の文字列

プレイヤーの設定変更

ビデオにグループ設定を行うことで、前後のビデオに移動できるようになります。
ポスター画像のクラスにgroup1を指定します。

<div>
  <img width="272" height="153" class="pv_poster group1" src="http://airwhite.net/popupvideo/a.png" title="地上からの夜光雲">
  <img width="272" height="153" class="pv_poster group1" src="http://airwhite.net/popupvideo/b.png" title="ガラスの風鈴">
  <img width="272" height="153" class="pv_poster group1" src="http://airwhite.net/popupvideo/c.png" title="天神祭の花火(大阪・淀川)">
</div>

グループ化したい要素を pv_player() で選択し、オプションとして rel: でグループ名を、current: で案内文を引数として渡します。

$.pv_init();
$("img.group1").pv_player({ rel: "group1", current: "(C)NHK  {current}/{total}" });
キー初期値説明
relfalse関連するグループ名(クラス名)
currentvideo {current} of {total}案内用の文字列

そうすることで再生中に前後のビデオに移動したり、ビデオの何本目かの案内も出すことが出来るようになります。