共有 A・AB タイプ、専有 AS タイプ仕様書

PC&スマートフォン向け配信サービス
共有 A・AB タイプ、専有 AS タイプ仕様書
Document Ver.1.04 公開版(2014/07/10)
1
共有 A・AB タイプ、専有 AS タイプ仕様書
改訂履歴
2014/04/23
Document Ver.1.00b 初版
2014/05/07
Document Ver.1.00
公開版
2014/05/08
Document Ver.1.01
誤字修正。ライトボックスの%の説明追加。
2014/05/23
Document Ver.1.02
コンテンツ保護の説明追加。
2014/06/18
Document Ver.1.03
コントロールバー非表示機能の追加。
2014/07/10
Document Ver.1.04
ドメイン認証についての説明修正。
2
共有 A・AB タイプ、専有 AS タイプ仕様書
目次
PC&スマートフォン向け配信(Aシリーズ)について
4
視聴者環境
5
配信可能なファイル形式
6
埋め込まれるプレイヤーのレイアウト
7
・PCでアクセスした際のプレイヤーレイアウト
8
・iPadでアクセスした際のプレイヤーレイアウト
9
・iPhoneでアクセスした際のプレイヤーレイアウト
10
・Androidでアクセスした際のプレイヤーレイアウト
11
再生速度操作部
12
チャプター機能操作部
13
チャプター機能管理画面
14
埋め込みタグについて
16
ライトボックス機能について(ベータ版)
23
コンテンツ保護機能
28
・ドメイン認証
29
・シリアル認証
30
・シリアル認証(フローチャート)
31
3
共有 A・AB タイプ、専有 AS タイプ仕様書
PC&スマートフォン向け配信(A シリーズ)について。
A シリーズは HTML5 ビデオを利用した配信プランになります。
動画配信の規格には WindowsMedia や Silverlight、Flash などがありますが、
それらはスマートフォンやタブレットには対応していないのが現状です。
HTML5 ビデオはプラグインを必要とせず、PC やスマートフォンの両方に対応していま
す。PC 向けにも HTML5 ビデオを利用した場合、PC には Flash、スマートフォンには
HTML5 をなどと言うように、配信対象別に配信サーバーを用意する必要が無い為、コ
ストメリットが得られます。
A シリーズは PC 向け、スマートフォン向けで共通した埋め込みタグで動画を埋め込み
ます。PC はコレ、スマートフォンはコレという風にデバイス毎に埋め込みタグを変更
する必要が無い為、公開者側の負担が軽減されています。
A シリーズは配信規模に合わせて、
「共有 A タイプ」
、
「共有 AB タイプ」
、
「専有 AS タイ
プ」と 3 つの大きなプランに分かれております。
小規模~大規模に合わせて様々な運用レベルに対応出来るようにプラン分けしてお
ります。
プレイヤーの主な機能としては再生速度調整、チャプター機能などがあります。
再生速度調整(PC のみ利用可)は 0.2 倍から 2.0 倍までの調整が可能です。
チャプター機能には公開者側が予め決めておくオーナーサイドチャプターと、
視聴者がしおり替わりに利用できるユーザーサイドチャプターがあります。
これらの機能の使用有無などは全て埋め込みタグで制御可能です。
この資料では埋め込みタグの詳細な説明や上記機能の説明など、
図と文章を交えて解説させて頂きます。
4
共有 A・AB タイプ、専有 AS タイプ仕様書
視聴者環境について。
推奨の視聴者環境は以下の通りとなります。
・Windows 7/8/8.1
IE9 以上(※)
、FireFox 最新版、Chrome 最新版
・Macintosh
Safari6.0 以上(※)
、Chrome 最新版
・iOS
Safari 最新版、Chrome 最新版
・Android4.0 以上
Android ブラウザ最新版、Chrome 最新版
※一部のブラウザにおいて、全画面表示に対応していないものが有ります。
全画面非対応:IE9、IE10、Safari6.0
全画面対応 :IE11、Safari6.1、FireFox、Chrome、Android ブラウザ
A シリーズのプレイヤーはコンテンツの再生制御に Cookie や Java スクリプトを使用しており
ますが、それらを許可していない環境では正常にコンテンツを再生出来ません。
Cookie と Java スクリプトは許可して頂きますようお願い致します。
ブラウザによっては初めてプレイヤーを使用する際に以下のようなメッセージが表示される場
合があります。
これはインラインフレーム内に埋め込まれたプレイヤーが Cookie を利用出来な
い場合に表示されます。主に Safari にて表示されます。
「コンテンツの取得準備をする。
」
をクリックする事により、
別ページが一時的に POP アップし、
Cookie の利用許可がブラウザに与えられて再生可能状態となります。
このメッセージは一度許可が与えられると次回からは表示されませんが、ブラウザの Cookie
をリセットすると再度表示されます。
5
共有 A・AB タイプ、専有 AS タイプ仕様書
配信可能なファイル形式について。
・ファイル拡張子
.mp4
・映像コーデック
H.264(ベースラインプロファイル)
・音声コーデック
AAC-LC
・映像サイズ推奨上限
横 1280・縦 720(※)
・映像ビットレート推奨上限
2Mbps(※)
・音声ビットレート推奨上限
160Kbps(※)
※スマートフォンの場合、デバイスの再生能力の違いや OS 上の制限によって、
再生出来る動画の上限が異なります。
幅広い機器に対応するためには、映像サイズは横 640、縦 360、
映像ビットレートは 1Mbps、音声ビットレートは 128Kbps 程度をお勧めします。
6
共有 A・AB タイプ、専有 AS タイプ仕様書
埋め込まれるプレイヤーのレイアウトについて。
※上記画面は PC 向けのレイアウトです。表示されている画像はサムネイルです。
プレイヤーはビデオ表示部と高さ 60 ピクセルのコントロール部で構成されています。
次のページから各部の詳細を説明します。
7
共有 A・AB タイプ、専有 AS タイプ仕様書
・PC でアクセスした際のプレイヤーレイアウト
※上記画面は PC 向けのレイアウトです。表示されている画像はサムネイルです。
①・・・プレイボタン(再生中はポーズボタンになります。
)
②・・・再生時間
③・・・トータル時間
④・・・チャプター機能操作部
⑤・・・プログレスバー
⑥・・・再生速度操作部
⑦・・・ミュートボタン(押すとミュートになります。
)
⑧・・・音量調整
⑨・・・フルスクリーンボタン
⑩・・・センタープレイボタン
8
共有 A・AB タイプ、専有 AS タイプ仕様書
・iPad でアクセスした際のプレイヤーレイアウト
※上記画面は iPad 向けのレイアウトです。表示されている画像はサムネイルです。
①・・・プレイボタン(再生中はポーズボタンになります。
)
②・・・再生時間
③・・・トータル時間
④・・・チャプター機能操作部
⑤・・・プログレスバー
⑥・・・フルスクリーンボタン
⑦・・・センタープレイボタン
音量調整はデバイス側で行うため、ミュートボタン・音量調整部が表示されません。
再生速度操作については今後実装予定です。
9
共有 A・AB タイプ、専有 AS タイプ仕様書
・iPhone でアクセスした際のプレイヤーレイアウト
※上記画面は iPhone 向けのレイアウトです。表示されている画像はサムネイルです。
①・・・センタープレイボタン
iPhone での動画再生はブラウザに埋め込まれた形で再生するのではなく、
デフォルトの再生プレイヤー(QuickTime)が立ち上がって再生されるため、
ブラウザ上での表示は上記のようなシンプルなデザインとなります。
10
共有 A・AB タイプ、専有 AS タイプ仕様書
・Android でアクセスした際のプレイヤーレイアウト
※上記画面は Android 向けのレイアウトです。表示されている画像はサムネイルです。
①・・・プレイボタン(再生中はポーズボタンになります。
)
②・・・再生時間
③・・・トータル時間
④・・・プログレスバー
⑤・・・フルスクリーンボタン
音量調整はデバイス側で行うため、ミュートボタン・音量調整部が表示されません。
再生速度調整については未対応のため、再生速度操作部が表示されません。
11
共有 A・AB タイプ、専有 AS タイプ仕様書
再生速度操作部について。
再生速度調整に対応したデバイスでは、再生速度 0.2 倍から 2.0 倍までの間、
0.2 倍毎の調整が可能です。
①・・・デフォルトボタン(SPEED という文字をクリックすると 1.0 倍に戻ります。
)
②・・・現在の再生速度が表示されます。1.0 は標準速度です。
③・・・再生速度ダウン(ここをクリックすると 0.2 ダウンします。例:1.0→0.8)
④・・・再生速度アップ(ここをクリックすると 0.2 アップします。例:1.0→1.2)
12
共有 A・AB タイプ、専有 AS タイプ仕様書
チャプター機能操作部について。
チャプター機能に対応したデバイスでは、チャプター管理が可能です。
①・・・チャプター管理画面ボタン。押すとチャプター管理画面が表示されます。
②・・・再生中の場所にチャプターを記録します。
(ユーザーサイドチャプター時のみ)
③・・・一つ前のチャプターに戻る。
④・・・次のチャプターへ進む。
13
共有 A・AB タイプ、専有 AS タイプ仕様書
チャプター管理画面について。
チャプター管理画面は、
「チャプター機能操作部」の「チャプター管理画面ボタン」で表示出来ます。
チャプター画面にはオーナーサイドとユーザーサイドがあります。
オーナーサイドチャプターはコンテンツ公開者が決めておくものです。
視聴者はオーナーサイドチャプターを変更出来ません。
オーナーサイドチャプターは「CONTENTS CHAPTER」と表記されます。
※上記画面は PC 向けのレイアウトです。
①・・・チャプターライン(チャプターが記録されている部分に赤いラインが引かれます)
②・・・チャプタータイトル。コンテンツ公開者が決めます。視聴者が変更出来ません。
③・・・チャプター記録時間。
④・・・ダイレクトプレイボタン。チャプターが記録されている場所から再生します。
⑤・・・チャプター削除ボタン。※オーナーサイドチャプターは削除できません。
⑥・・・ユーザーサイドチャプター「MY CHAPTER」へ切り替えするタブ。
14
共有 A・AB タイプ、専有 AS タイプ仕様書
オーナーサイドチャプターはコンテンツ公開者が決めておくものですが、
ユーザーサイドチャプターは視聴者が自由に追加・変更可能です。
ユーザーサイドチャプターは「MY CHAPTER」と表記されます。
※上記画面は PC 向けのレイアウトです。
①・・・チャプターライン(チャプターが記録されている部分に赤いラインが引かれます)
②・・・チャプタータイトル。視聴者が自由に設定出来ます。
③・・・チャプター記録時間。
④・・・ダイレクトプレイボタン。チャプターが記録されている場所から再生します。
⑤・・・チャプター削除ボタン。
⑥・・・オーナーサイドチャプター「CONTENTS CHAPTER」へ切り替えするタブ。
15
共有 A・AB タイプ、専有 AS タイプ仕様書
埋め込みタグについて。
動画プレイヤーは埋め込みタグによって各機能の使用有無を決めることが出来ます。
埋め込みタグは以下のような形状になっております。
<iframe id="html5video" src="https://041.mediaimage.jp/player.asp
?client_code=test
&video_file=bbb-640-360-1000.mp4
&serial=12345678
&thumbnail_file=http://www.mi-j.com/img/bbb-thumbnail.jpg
&userside_chapter=on
&ownerside_chapter=on
&ownerside_chapter_title=タイトル1,タイトル2,タイトル3,タイトル4,
&ownerside_chapter_data=120,240,360,500,999999
&speed_mode=on
&auto_start=off
&control_visibility=off"
width="640"
height="420"
marginwidth="0"
marginheight="0"
frameborder="0"
scrolling="no" allowfullscreen >
</iframe>
動画プレイヤーはインラインフレームで埋め込まれます。
次のページより各行について詳しく解説させて頂きます。
重要な点として12行目の最後にダブルコーテーション(")が有る事に注目下さい。
この12行目までのパラメータは1行目の src=によって送られています。
その為 src="https://~~~& control_visibility=on" で閉じられています。
一部のパラメータは、その機能を使用しない場合は省略可能ですが、
最後のパラメータは(")で閉じて下さい。
16
共有 A・AB タイプ、専有 AS タイプ仕様書
1行目 <iframe id="html5video" src="https://041.mediaimage.jp/player.asp について。
これはインラインフレームの冒頭部分です。
idは任意の文字をお使い頂けますし、特に変更頂く必要もありません。
https://041.mediaimage.jp/player.aspはプレイヤープログラム本体を指定しています。
この例では配信サーバーのアドレスは 041.mediaimage.jp となります。
プランの違いによってこのアドレスは変わります。
2行目 ?client_code=test について。
client_codeはお客様個別に与えられた識別情報となります。
フォルダ名のようなものです。
この情報はお申込みフォームにて第1希望、第2希望をお聞きしております。
?(クエスチョンから始まっている事にご注意下さい。)
3行目 &video_file=bbb-640-360-1000.mp4 について。
video_fileは再生する動画ファイルを指定しています。
上記はbbb-640-360-1000.mp4というファイルを指定しています。
FTPにてアクセス頂きました場所を起点とします。
例えば test-folder というフォルダを作り、そこにtest.mp4を配置したとします。
その場合は &video_file=test-folder/test.mp4 となります。
&(アンドから始まっている事にご注意下さい。)
ここで指定するビデオファイル名は符号化して記載する事も可能です。
この符号化は以下のアドレスで行えます。
※ファイル名が test-folder/test.mp4 の場合。
https://041.mediaimage.jp/hash-videofilename.aspx?filename=test-folder/test.mp4
で表示される 4f992d688f8e97d77d2eebb1509f7ce8162398ea4ff245848092fd9f6f9ffa28
が符号化されたファイル名となります。
符号化する事によりファイル名を予測して悪意のあるアクセスを防止出来ます。
例:video-001.mp4というファイルが有る場合、
video-002.mp4も有るのでは?という予測。
17
共有 A・AB タイプ、専有 AS タイプ仕様書
4行目 &serial=12345678 について。 ※省略可能な行
これはシリアル認証で使用します。シリアル認証を使用しない場合は無視下さい。
シリアル認証については別項目で詳しく説明させて頂きます。
使用しない場合は省略も可能です。
5行目 &thumbnail_file=http://www.mi-j.com/img/bbb-thumbnail.jpg について。
※省略可能な行
これはプレイヤーが表示された際、再生前に表示するサムネイルを指定する項目です。
http から始まるアドレスを記載します。JPEG が使用出来ます。
6行目 &userside_chapter=on について。 ※省略可能な行
これはユーザーサイドチャプター機能「MY CHAPTER」を制御する項目です。
&userside_chapter=on でユーザーサイドチャプター機能を有効に出来ます。
使用しない場合は &userside_chapter=off とします。省略も可能です。
ユーザーサイドチャプターとオーナーサイドチャプターの両方を同時に使用する事も出来
ますし、ユーザーサイドチャプターのみを使用する事も可能です。
7行目 &ownerside_chapter=on について。 ※省略可能な行
これはオーナーサイドチャプター機能「CONTENTS CHAPTER」を制御する項目です。
&ownerside_chapter=on でオーナーサイドチャプター機能を有効に出来ます。
使用しない場合は & ownerside _chapter=off とします。省略も可能です。
オーナーサイドチャプターとユーザーサイドチャプターの両方を同時に使用する事も
出来ますし、オーナーサイドチャプターのみを使用する事も可能です。
18
共有 A・AB タイプ、専有 AS タイプ仕様書
8行目 &ownerside_chapter_title=タイトル1,タイトル2,タイトル3,タイトル4, について。
※省略可能な行
これはオーナーサイドチャプター機能を利用する際に、
既定値として表示させるチャプター情報のタイトル名を指定します。
チャプターは5つまで利用出来ます。その為、タイトル名も5つまで指定できます。
それぞれのタイトル名はカンマ(,)によって区切られています。
上記の例では4つのタイトル名を指定していますが、
最後がカンマ(,)で終わっている事に注目下さい。
これは5つ目のチャプターを利用していない為に5つ目が未入力となっています。
例えば5つ目のチャプタータイトルが有る場合は以下のような記載になります。
&ownerside_chapter_title=タイトル1,タイトル2,タイトル3,タイトル4,タイトル5
カンマ(,)は各タイトルの間に入るためカンマ(,)の合計数は4つとなります。
これは入力規則として守る必要があります。
例えばタイトルを2つしか利用しない場合は
&ownerside_chapter_title=タイトル1,タイトル2,,, という風になります。
オーナーサイドチャプター機能を利用しない場合は省略も可能です。
【重要】文字化けを防ぐため、埋め込むページは UTF-8 をご利用下さい。
UTF-8 が利用出来ない場合は URL エンコード(UTF-8)して記載して下さい。
9行目 &ownerside_chapter_data=120,240,360,500,999999 について。 ※省略可能な行
これはオーナーサイドチャプター機能を利用する際に、
既定値として指定する時間情報を記載します。単位は秒数となっています。
これについてもタイトル名と同様、5つまで指定出来ます。
記載する順番はタイトル名の順番と対になっています。
タイトル1,タイトル2,タイトル3,タイトル4,(未使用)
120
,
240
,
360
,
500
,
999999
ここでの注意点は未使用の項目は999999を記載するという点です。
例えばタイトルを2つしか利用しない場合は、
&ownerside_chapter_data=120,240,999999,999999,999999 という風になります。
オーナーサイドチャプター機能を利用しない場合は省略も可能です。
19
共有 A・AB タイプ、専有 AS タイプ仕様書
10行目 &speed_mode=on について。 ※省略可能な行
これは再生速度調整機能を使用するかを指定する項目です。
使用しない場合は &speed_mode=off とします。省略も可能です。
再生速度調整機能を利用しない場合は省略も可能です。
11行目 &auto_start=off について。 ※省略可能な行
これはオートスタートを制御する項目です。
オートスタートさせない場合は &auto_start=off" とします。
オートスタートさせる場合は &auto_start=on" とします
スマートフォンやタブレットではOSのセキュリティの関係で、
オートスタート動作に制限が掛かっており、
onの場合でも正常に働かない場合があります。
12行目 &control_visibility=off"
について。
フルスクリーンではない通常埋め込み時にもコントロールバーを非表示に出来ます。
プレイヤーからカーソルを離して数秒経過するとコントロールバーが非表示になり、
マウスオーバーやタッチをすると再表示されます。
コントロールバーを非表示にさせない場合は &control_visibility=off" とします。
非表示にさせる場合は &control_visibility=on" とします
13行目~14行目で指定する、動画プレイヤー埋め込みサイズを、
動画自身の画面サイズもしくは動画と同じ縦横比で指定する事により、
動画と埋め込み部分がジャストフィットします。
重要な点として最後にダブルコーテーション(")が有る事に注目下さい。
この12行目までのパラメータは1行目の src=によって送られています。
その為 src="https://~~~&control_visibility=off" で閉じられています。
利用しない場合は control_visibility=off は省略可能ですが、
最後のパラメータの後ろは(")で閉じて下さい。
20
共有 A・AB タイプ、専有 AS タイプ仕様書
13行目 width="640" について。
これは埋め込まれる動画プレイヤーの横サイズになります。
width="640" は横サイズを640ピクセルにするという意味になります。
横サイズはチャプター機能、再生速度調整機能の有無により下限値が決まります。
プレイヤー操作部のレイアウトを正常に保つ為です。
チャプター機能のみを使用する場合は545ピクセル以上。
再生速度調整機能のみを使用する場合は440ピクセル以上。
チャプター機能と再生速度調整機能の両方を利用する場合は640ピクセル以上。
チャプター機能と再生速度調整機能の両方を利用しない場合は350ピクセル以上。
14行目 height="420" について。
これは埋め込まれる動画プレイヤーの縦サイズになります。
height="420" は縦サイズを420ピクセルにするという意味になります。
注意点としては動画表示部分に60を足した数字になる点です。
この60とはプレイヤー操作部の高さになります。
操作部の高さが60ピクセル有るため、60が加算されたサイズになります。
この例では動画部分の高さが360ピクセルのため60を加算し420としております。
正常なレイアウトを保つため、240以上の数値を設定して下さい。
21
共有 A・AB タイプ、専有 AS タイプ仕様書
15行目~19行目 について。
この5行は固定値です。
変更するとレイアウトが崩れる場合がありますので変更しないで下さい。
チャプター機能と再生速度調整機能の両方を使用しない場合、以下のように省略出来ます。
<iframe id="html5video" src="https://041.mediaimage.jp/player.asp
?client_code=test
&video_file=bbb-640-360-1000.mp4
&serial=12345678
&thumbnail_file=http://www.mi-j.com/img/bbb-thumbnail.jpg"
width="640"
height="420"
marginwidth="0"
marginheight="0"
frameborder="0"
scrolling="no" allowfullscreen >
</iframe>
22
共有 A・AB タイプ、専有 AS タイプ仕様書
ライトボックス機能について。
(ベータ版)
ライトボックス機能とは、ブラウザ上に小さなサムネイルを埋めておき、
そのサムネイルをクリックする事でブラウザ中央に拡大して表示される機能です。
よく写真などの表示に使われている機能です。
Aシリーズの再生プレイヤーもライトボックス機能を利用する事が可能です。
ライトボックスのパターンは以下の5つがあります。
※これらの機能を使わず独自のライトボックスをご利用頂く事も可能です。
パターン1
パターン2
23
共有 A・AB タイプ、専有 AS タイプ仕様書
パターン3
パターン4
パターン5
24
共有 A・AB タイプ、専有 AS タイプ仕様書
ライトボックス機能を利用する際のHTMLタグは以下の通りとなります。
<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>
<script>
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"682px", height:"490px"});
});
</script>
<a class="iframe" href="https://041.mediaimage.jp/player.asp
?client_code=test
&video_file=bbb-640-360-1000.mp4
&serial=12345678
&thumbnail_file=http://www.mi-j.com/img/bbb-thumbnail.jpg
&userside_chapter=on
&ownerside_chapter=on
&ownerside_chapter_title=みの,test,みのてすと,ミノテスト,
&ownerside_chapter_data=120,240,360,500,999999
&speed_mode=on
&auto_start=off">ライトボックスでPOPアップ</a>
1行目から8行目まではページの<head> </head>内に記述して下さい。
赤文字部分に関しては16ページからの埋め込みタグのパラメータ説明に準拠します。
ライトボックスのパターン切り替えは1行目の colorbox1.css を変更します。
・パターン1の場合 colorbox1.css
・パターン2の場合 colorbox2.css
・パターン3の場合 colorbox3.css
・パターン4の場合 colorbox4.css
・パターン5の場合 colorbox5.css
25
共有 A・AB タイプ、専有 AS タイプ仕様書
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スクリプトファイルは、
テスト用として配信サーバー上に設置したものを指定していますが、
必ずご利用のホームページ上に配置してご利用下さい。
ファイルは以下のアドレスよりダウンロード下さい。
http://www.mi-j.com/service/pcs/lightbox-code.zip
26
共有 A・AB タイプ、専有 AS タイプ仕様書
ライトボックス機能は一部のブラウザにて全画面再生からの復帰時に、
若干レイアウトにズレが発生する場合があります。
スマートフォンなどの場合でも、デフォルトの拡大率以外で使用した場合は、
同じく若干のズレが生じる場合があります。
既知の不具合。
・IE の場合
ページトップより下にスクロールしてから立ち上げられたライトボックスは、
全画面からの復帰時にページトップまでライトボックスが移動してしまう。
・クロームの場合
全画面からの復帰時にライトボックス内の下部にスクロールバーが表示され、
プレイヤーが右にスクロール出来てしまう場合がある。
これらの不具合はライトボックス機能と HTML5 全画面表示機能との、
相性によるものと考えられます。
今後、対応していく予定です。
27
共有 A・AB タイプ、専有 AS タイプ仕様書
コンテンツ保護機能について。
共有 AB タイプ・専有 AS タイプにはコンテンツ保護機能があります。
共有 AB タイプは「ドメイン認証」を使用出来ます。
共有 AS タイプは「ドメイン認証」と「シリアル認証」を使用出来ます。
その他、簡易なダウンロード保管防止機能が備わっています。
「シリアル認証」についてはホームページ側のシステムと連携する必要があります。
その為、お申込み前に事前テストをお受けする事が可能です。
「ドメイン認証」と「シリアル認証」について詳しくは、
次のページからの情報をご覧下さい。
※「ダウンロード保管防止機能」について。
配信サーバーは HTML5 ビデオプレイヤーからの要求にのみデータ転送を行います。
その為、動画ファイルのアドレスが分かっている場合でも、
ブラウザなどでのダウンロード保管が行えなくなっております。
スマートフォンで普及している動画ダウンロード保管アプリでも同様です。
しかし画面上で再生行為を行う事が目的である以上、ビデオカメラもしくは、
それと同等の機能にて再生画面を録画する事は不可能ではありません。
HTML5 自身にもそのような動作を行う事を防止する機能は有りません。
プレイヤーはスムーズな再生を維持する為バッファリング機能があります。
バッファされたファイルは PC 内に隠しファイルとして一時的に保持されます。
プレイヤーが閉じられる際に破棄されるようになっておりますが、
一時的な隙をついて破棄される前のファイルを保管する事は不可能ではありません。
28
共有 A・AB タイプ、専有 AS タイプ仕様書
コンテンツ保護機能について。
・ドメイン認証について。
A シリーズは動画をホームページに埋め込んで再生を行います。
埋め込んで再生出来るホームページを制限するのがドメイン認証です。
ホームページにはアクセスするためのアドレスにドメイン名が含まれています。
指定したドメイン以外のホームページ上では再生出来なくするという仕組みです。
このドメイン認証機能を使用する事により、
埋め込みタグを指定外のドメインを持つホームページにコピーして貼り付けた場合の再生を拒
否する事が可能になります。
指定したドメインを持つホームページ上でのみ再生が可能という状況なので、
会員ログイン後にのみアクセス出来るホームページに動画を埋め込む事により、
ホームページ側の会員認証と連動が可能となります。
再生させる動画コンテンツも埋め込みタグで指定する為、
特定の会員に、特定の動画を見せるという事も可能です。
このドメイン認証は複数の登録が可能です。
このドメイン認証の設定は配信サーバー上の特定の部分に記載する必要があるため、
メディアイメージにドメイン情報をお送り頂くようになります。
初期値はドメイン認証機能がオフになっております。
指定以外のドメインを持つホームページに埋め込まれた場合の表示例。
ホストを省略したアドレスを設定した場合は、そのアドレスのみで再生が可能となります。
例:ドメイン認証の再生対象に example.com を設定しても、
http://www.example.com では再生出来ません。http://example.com のみとなります。
29
共有 A・AB タイプ、専有 AS タイプ仕様書
コンテンツ保護機能について。
・シリアル認証について。
シリアル認証は埋め込みタグにパラメータとして記載されたシリアルナンバーを、
再生開始時にデータベースに照合に行き、OK の場合のみ再生開始される仕組みです。
シリアルには半角数字以外に半角英文字が使用出来ます。
1.
視聴者が動画を公開しているアドレスへアクセスを行います。
2.
WEB サーバーは、ランダムなシリアルを生成し、データベースに登録を行います。
3.
WEB サーバーは、その視聴者が見たいコンテンツを判断し、動画コンテンツのファイ
ル名と上記で作成したシリアルを動的に出力する準備をします。
4.
動画コンテンツのファイル名とシリアルを含んだ埋め込みタグを出力します。
5.
視聴者のブラウザはタグが埋め込まれた HTML を受け取って、
再生プレイヤーを表示します。
6.
再生プレイヤーの再生ボタンをクリックします。
7.
再生プレイヤーは埋め込みタグを経由して受け取ったシリアルを配信サーバーへ送
付します。
8.
配信サーバーは再生プレイヤーからシリアルを受け取ります。
9.
配信サーバーはシリアルナンバーの正当性を確認する為、データベースに問い合わ
せます。データベースに問い合わせする手段として、配信サーバー自身が WEB クラ
イアントとなり、GET でシリアルを付加してアクセスを行います。GET で受けるのは
PHP や CGI など、制限はありません。
アドレス例:http://WEB サーバーアドレス/kensho.php?serial=*****
10. WEB サーバー(シリアル検証プログラム)は GET でシリアルナンバーを受け取ります。
11. シリアルが正しいものかデータベースで照合します。
12. 一致するシリアルがあれば OK を表示。一致するものが無ければ NG を表示。この表
示は HTML で単純に OK や NG のみを表示するだけで対応出来ます。
13. WEB クライアントとして OK か NG かを受け取り、OK なら動画データの転送を開始し
ます。
14. 再生プレイヤーはコンテンツを再生します。
30
共有 A・AB タイプ、専有 AS タイプ仕様書
コンテンツ保護機能について。
コンテンツ保護機能(シリアル認証の流れ)
視聴者
①
動画公開ページへ
アクセス
WEBサーバー
データベース
②ランダムなシリアル
配信サーバー
シリアルナンバーを
記録
ナンバーを生成して
データベースに登録
③
プレイヤー埋め込みタグを
動的に生成
(シリアルナンバーも埋込)
⑤
プレイヤーが埋め込まれた
ページを表示
④
動的に生成したタグを
HTMLに埋め込んで出力
⑥
再生ボタンをクリックして
再生開始
⑦パラメータとして受け取っている
⑧
シリアルナンバーを
配信サーバーに送付
シリアルナンバーを受信
⑩
取得したシリアル
ナンバーを検証
アドレス例
http://WEBサーバーアドレス/kensho.php?serial=*****
⑪
⑨
配信サーバーが
WEBクライアントとし
てシリアルナンバー
をGETで送付
シリアルナンバーを照合
(照合後に削除しておくと
2回目以降の再生を拒否)
⑫
⑬
一致する情報があれば
OKを表示、無ければ
NGを表示。
OKかNGかを取得
照合結果
照合OK
⑭
再生を許可
(動画転送開始)
動画受信開始
再生不可
再生開始
31
照合NG