ライトボックス機能について(β版)
ライトボックス機能とは、ブラウザ上に小さなサムネイルを埋めておき、そのサムネイルをクリックする事でブラウザ中央に拡大して表示される機能です。
よく写真などの表示に使われている機能で、Aシリーズの再生プレーヤーもライトボックス機能を利用する事が可能です。

ライトボックスのパターンは以下の5つがあります。
※これらの機能を使わず独自のライトボックスをご利用頂く事も可能です。

lightbox機能-パターン1
パターン1
lightbox機能-パターン2
パターン2
lightbox機能-パターン3
パターン3
lightbox機能-パターン4
パターン4
lightbox機能-パターン5
パターン5


ライトボックス機能を利用する際のHTMLタグは以下の通りとなります。

<head>
<link rel="stylesheet" href="https://dev.mediaimage.jp/lightbox-code/colorbox1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://dev.mediaimage.jp/lightbox-code/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"682px", height:"490px"});
});
</script>
</head>


<a class="iframe" href="https://041.videoplayer.jp/player.asp
?client_code=test
&video_file=bbb-640-360-1000.mp4
&serial=12345678
&thumbnail_file=bbb-thumbnail.jpg
&userside_chapter=on
&ownerside_chapter=on
&ownerside_chapter_title=タイトル1,タイトル2,タイトル3,タイトル4
&ownerside_chapter_data=120,240,360,500
&speed_mode=on
&auto_start=off">ライトボックスでPOPアップ</a>

赤文字の部分が、WEBページにプレーヤーを埋め込んでの動画配信と、タグが異なる箇所です。
1行目から8行目まではページの<head> </head>内に記述して下さい。
波線下部の黒字部分は、埋め込みタグのパラメータ説明に準拠します。


ライトボックスのパターン切り替えは1行目の colorbox1.css を変更します。
・パターン1の場合 colorbox1.css
・パターン2の場合 colorbox2.css
・パターン3の場合 colorbox3.css
・パターン4の場合 colorbox4.css
・パターン5の場合 colorbox5.css

6行目は表示させるライトボックスのサイズを指定する項目があります。
width:"682px", height:"490px" という部分がそれにあたります。
ここで指定するサイズはプレーヤーのサイズに枠のサイズを足したものとなります。

パターンはそれぞれにデザインが異なるために枠の幅も変わっています。
枠の幅を加算した数値を6行目に反映させる必要があります。
例えばパターン1の枠の幅は、上は21px、横は左右ともに21px、下は49pxあります。
その為、埋め込むプレーヤーサイズを横640px、縦420pxとしたい場合は、
6行目のwidthは640+21+21=682、heightは420+21+49=490となります。

それぞれのパターン別に加算する数値は以下の通りとなります。
・パターン1の場合  widthは42を足す。heightは70を足す。
・パターン2の場合  widthは2を足す。heightは34を足す。
・パターン3の場合  widthは10を足す。heightは30を足す。
・パターン4の場合  widthは50を足す。heightは70を足す。
・パターン5の場合  widthは28を足す。heightは62を足す。
上記の数値を、表示させたいプレーヤーのサイズに加算して6行目に挿入下さい。

参考のため、プレーヤーサイズを横640px、縦420pxとしたい場合の値を記載します。
・パターン1の場合  width:"682px", height:"490px"
・パターン2の場合  width:"642px", height:"454px"
・パターン3の場合  width:"650px", height:"450px"
・パターン4の場合  width:"690px", height:"490px"
・パターン5の場合  width:"668px", height:"482px"
これらの値は上記のようにピクセル(px)で指定する以外に、 パーセント(%)で指定する事も可能です。 
例:width:"80%", height:" 80%"
※パーセントで指定した場合、ブラウザのウィンドウ領域をベースに計算されます。その為、ビデオ表示領域がプレーヤーサイズとマッチしない場合があります。


このサンプルタグの1行目から3行目までの、ライトボックス用のスタイルシートやJavaスクリプトファイルは、 弊社テストサーバー上に設置したファイルを指定しています。
この箇所を、お客様がご契約頂いたプランのサーバーアドレスに変更して頂きます。
なおサーバーアドレスは、お申込み後にお送りさせて頂きますサーバー設定完了メールに記載されております。

例)お客様のサーバーアドレスが 「041.mediaimage.jp」 の場合

<link rel="stylesheet" href="https://041.mediaimage.jp/lightbox-code/colorbox1.css" />
<script src="https://041.mediaimage.jp/lightbox-code/jquery.min.js"></script>
<script src="https://041.mediaimage.jp/lightbox-code/jquery.colorbox.js"></script>

となります。

その他、お客様がお使いのWEBサーバーに、ライトボックス用のファイルをアップロードして頂き、それを指定することも可能です。
ファイルは以下のアドレスよりダウンロード下さい。

ダウンロード

ライトボックス機能は一部のブラウザにて全画面再生からの復帰時に、
若干レイアウトにズレが発生する場合があります。
スマートフォンなどの場合でも、デフォルトの拡大率以外で使用した場合は、
同じく若干のズレが生じる場合があります。

既知の不具合。
・IEの場合
ページトップより下にスクロールしてから立ち上げられたライトボックスは、
全画面からの復帰時にページトップまでライトボックスが移動してしまう。

・Google Chromeの場合
全画面からの復帰時にライトボックス内の下部にスクロールバーが表示され、
プレーヤーが右にスクロール出来てしまう場合がある。

これらの不具合はライトボックス機能とHTML5全画面表示機能との、
相性によるものと考えられます。
今後、対応していく予定です。