よく写真などの表示に使われている機能で、Aシリーズの再生プレーヤーもライトボックス機能を利用する事が可能です。
ライトボックスのパターンは以下の５つがあります。
※これらの機能を使わず独自のライトボックスをご利用頂く事も可能です。
 パターン１ |
 パターン２ |
 パターン３ |
 パターン４ |
 パターン５ |
<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=タイトル１,タイトル２,タイトル３,タイトル４
&ownerside_chapter_data=120,240,360,500
&speed_mode=on
&auto_start=off">ライトボックスでPOPアップ</a>
赤文字の部分が、WEBページにプレーヤーを埋め込んでの動画配信と、タグが異なる箇所です。
１行目から８行目まではページの<head> </head>内に記述して下さい。
波線下部の黒字部分は、埋め込みタグのパラメータ説明に準拠します。
・パターン１の場合 colorbox1.css
・パターン２の場合 colorbox2.css
・パターン３の場合 colorbox3.css
・パターン４の場合 colorbox4.css
・パターン５の場合 colorbox5.css
６行目は表示させるライトボックスのサイズを指定する項目があります。
width:"682px", height:"490px" という部分がそれにあたります。
ここで指定するサイズはプレーヤーのサイズに枠のサイズを足したものとなります。
パターンはそれぞれにデザインが異なるために枠の幅も変わっています。
枠の幅を加算した数値を６行目に反映させる必要があります。
例えばパターン１の枠の幅は、上は21px、横は左右ともに21px、下は49pxあります。
その為、埋め込むプレーヤーサイズを横640px、縦420pxとしたい場合は、
６行目のwidthは640＋21＋21＝682、heightは420＋21＋49＝490となります。
それぞれのパターン別に加算する数値は以下の通りとなります。
・パターン１の場合 widthは42を足す。heightは70を足す。
・パターン２の場合 widthは2を足す。heightは34を足す。
・パターン３の場合 widthは10を足す。heightは30を足す。
・パターン４の場合 widthは50を足す。heightは70を足す。
・パターン５の場合 widthは28を足す。heightは62を足す。
上記の数値を、表示させたいプレーヤーのサイズに加算して６行目に挿入下さい。
参考のため、プレーヤーサイズを横640px、縦420pxとしたい場合の値を記載します。
・パターン１の場合 width:"682px", height:"490px"
・パターン２の場合 width:"642px", height:"454px"
・パターン３の場合 width:"650px", height:"450px"
・パターン４の場合 width:"690px", height:"490px"
・パターン５の場合 width:"668px", height:"482px"
これらの値は上記のようにピクセル(px)で指定する以外に、 パーセント(%)で指定する事も可能です。
例：width:"80%", height:" 80%"
※パーセントで指定した場合、ブラウザのウィンドウ領域をベースに計算されます。その為、ビデオ表示領域がプレーヤーサイズとマッチしない場合があります。
このサンプルタグの１行目から３行目までの、ライトボックス用のスタイルシートや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全画面表示機能との、
相性によるものと考えられます。
今後、対応していく予定です。