Web Player Controller

概要

Web Player Controller（旧 VGコントローラー）は、お客様のウェブサイトに iframe で埋め込まれた Kollus プレイヤーと通信して、再生状態を制御したりリアルタイムイベントを受信したりすることができる JavaScript ライブラリです。

主な特徴

統合制御: プレイヤーの種類に関わらず、単一の仕様で制御可能です。
独立動作: 外部ライブラリへの依存なしに独立して動作します。
イベント駆動アーキテクチャ: メソッド呼び出しおよびリアルタイムイベントリスナー構造をサポートします。

用語定義

このドキュメントで使用する主要な技術用語とプレイヤー表記についての定義です。

用語	説明
VideoGateway	ユーザーのリクエストに応じて再生データおよび認証情報を提供するサーバー
プレイヤー ID	Kollus プレイヤーの固有 ID
ハードウェア ID	Windows 環境など識別可能な値が存在する場合に提供されるハードウェア固有 ID
HLS Fragment	HLS（HTTP Live Streaming）プロトコルベースの再生時に、映像全体を分割した最小単位のメディアセグメントファイル
v3	HTML5 Player for PC (Hybrid): Microsoft Edge または Chrome 45 以上で暗号化コンテンツを再生する際に適用されるハイブリッド HTML5 プレイヤー
v4	HTML5 Player for All: 非暗号化コンテンツ専用のプラグインレス HTML5 プレイヤー
v5	Web Player: インストール型とプラグインレス型の利点を組み合わせた次世代統合 Web プレイヤー

プレイヤーガイド

Kollus プレイヤーの詳細については、以下のドキュメントを参照してください。

Kollus プレイヤーの種類

ライブラリのインストールと初期化

クライアントスクリプトを読み込んだ後、制御対象（iframe）を指定してインスタンスを生成します。

基本実装例

<script src="https://file.kollus.com/vgcontroller/vg-controller-client.latest.min.js"></script>
<script>
window.onload = function () {
  try {
    var controller = new VgControllerClient({
      target_window: document.getElementById('child').contentWindow,
    });
    // Register event listeners and call methods
  } catch (e) {
    console.error(e);
  }
};
</script>
<body>
  <iframe id="child" src="https://v.jp.kollus.com/{MEDIA_CONTENT_KEY}..."></iframe>
</body>

注意事項

対象の指定: target_window プロパティには、必ず iframe 要素の contentWindow オブジェクトを渡してください。
ブラウザ互換性: このライブラリは window.postMessage API を使用して通信します。この API をサポートしていないブラウザでは動作が制限されます。
複数プレイヤーの制御: ページ内に複数のプレイヤー（iframe）が存在する場合、各 iframe ID ごとに個別のインスタンスを生成する必要があります。

例外コード

初期化および通信中に発生する可能性があるエラーコードです。

コード	メッセージ	説明
`-1`	*	`postMessage` 通信中に発生した例外
`-99`	player type is not defined	プレイヤータイプ情報の欠如
`-99`	player type must be one of v2, v3, v4 and flash	サポートされていないプレイヤー
`-99`	this browser does not support postMessage	ブラウザが `postMessage` API をサポートしていない
`-99`	listener is not callable	登録しようとしているイベントリスナーが有効な関数ではない

CDN パス

Web Player Controller は CDN を通じて提供されます。

特定バージョンの固定

<script src="https://file.kollus.com/vgcontroller/vg-controller-client.1.1.4.min.js"></script>

セキュリティ強化（SRI 適用）

ライブラリの改ざん防止のため、SRI（Subresource Integrity）属性の使用を推奨します。

<script src="https://file.kollus.com/vgcontroller/vg-controller-client.1.2.3.min.js"
  integrity="sha256-esUCCL4RPYMS8AR+Sl3lNrFa5M+zgpt4Gb77qtz66OY="
  crossorigin="anonymous">
</script>

参考

バージョン別の Integrity 属性（Integrity Code）については、CDN リストを参照してください。

イベントリスニング

controller.on() メソッドを活用して、プレイヤーの状態変化および再生イベントをリアルタイムで受信します。

リスナー登録方法

単一リスナー

controller.on('event_name', function(param) {
  // Register event listener
});

複数リスナー

controller.on('event_name', function(param) {
  // First listener
});
controller.on('event_name', function(param) {
  // Second listener
});
// Execute all listeners when the event is fired

メソッドチェーン（Method Chaining）

連続したイベント登録を簡潔なコードで実装できます。

controller.on('event_name_1', function(param) {
  // First listener
}).on('event_name_2', function(param) {
  // Second listener
});

リスナーの実行順序

JavaScript の非同期環境の特性上、同一イベントに登録された複数のリスナー間の実行順序は保証されません。

推奨事項: 厳密な実行順序が必要なロジックは、1 つのリスナー内部で順番に記述してください。

イベント一覧

再生状態イベント

イベント	説明	対象プレイヤー
`loaded`	プレイヤーコンポーネントの読み込みが完了した時点で発生	v3, v4, v5
`ready`	サーバーから再生データを受信し、再生準備が完了した時点で発生	v3, v4, v5
`play`	初回再生開始または一時停止後の再生再開時に発生	v3, v4, v5
`pause`	一時停止時に発生	v3, v4, v5
`done`	再生位置が全体の長さ（`duration`）の末尾に達したときに発生	v3, v4, v5
`waiting`	ネットワーク環境の影響で追加バッファリングが必要な場合、正常化するまで 1 秒周期で発生	v4, v5

進行率（Progress）イベント

イベント	説明	対象プレイヤー
`progress`	再生中に約 1 秒間隔で発生し、現在の再生位置情報を提供	v3, v4, v5

progress パラメーター詳細

パラメーター	タイプ	説明
`percent`	`integer`	現在の再生進行率（0〜100）
`position`	`number`	現在の再生位置（sec）
`duration`	`number`	コンテンツの全体の長さ（sec）

controller.on('progress', function(percent, position, duration) {
  console.log(percent + '%', position + 'sec');
});

注意

HTML5 ブラウザのパフォーマンスおよびネットワーク環境によって、progress イベントは正確に 1 秒間隔ではなく、約 0.1〜0.5 秒の誤差が生じる場合があります。

シーク（Seek）イベント

イベント	説明	対象プレイヤー
`seeking`	ユーザーが再生位置の移動を開始した時点で発生	v4, v5
`seeked`	再生位置の移動操作が完了した時点で発生	v4, v5
`seek_start`	再生位置の移動が検出された最初の時点で発生	v4, v5

音響イベント

イベント	説明	対象プレイヤー
`muted`	ミュート状態（On/Off）の変更時に発生	v3, v4, v5
`volumechange`	音量の変更時に発生	v3, v4, v5

muted パラメーター詳細

パラメーター	タイプ	説明
`is_muted`	`boolean`	`true`: ミュート適用 `false`: ミュート解除

volumechange パラメーター詳細

パラメーター	タイプ	説明
`volume`	`integer`	変更後の音量（0〜100）

再生速度イベント

イベント	説明	対象プレイヤー
`speedchange`	再生速度の変更時に発生	v3, v4, v5
`playbackrateschange`	利用可能な再生速度グループの変更時に発生	v3, v4, v5

speedchange パラメーター詳細

パラメーター	タイプ	説明
`speed`	`string`	変更後の再生速度（0.5〜4）

画面イベント

イベント	説明	対象プレイヤー
`screenchange`	フルスクリーンモードと通常モード間の切り替え時に発生	v3, v4, v5
`device_orientation_changed`	モバイル画面の向き（横/縦）の変更時に発生	v4, v5
`user_active_changed`	ユーザーのインタラクションによるコントロールバーの有効化/無効化状態の変更時に発生	v4, v5

screenchange パラメーター詳細

パラメーター	タイプ	説明
`screen`	`string`	`windowed`: 通常モード `fullscreen`: フルスクリーンモード

device_orientation_changed パラメーター詳細

パラメーター	タイプ	説明
`orientation`	`string`	`Portrait`: 縦向き `Landscape`: 横向き

字幕イベント

イベント	説明	対象プレイヤー
`subtitle_load_done`	字幕ファイルの読み込みが完了した時点で発生	v3, v4, v5
`subtitlevisibilitychange`	字幕の表示状態（On/Off）の変更時に発生	v3, v4, v5

ストリーミングイベント

イベント	説明	対象プレイヤー
`hls_manifest_loaded`	HLS Manifest ファイルの読み込み完了時に発生	v4, v5
`dash_manifest_loaded`	DASH Manifest ファイルの読み込み完了時に発生	v4, v5
`bitrate_data_loaded`	ビットレートデータの読み込み完了時に発生（昇順でソート）	v4, v5
`hlsfragchange`	HLS Fragment の変更時に発生	v4, v5

bitrate_data 形式の例

controller.on('bitrate_data_loaded', function(bitrate_data) {
  // bitrate_data format: [{ width: <int>, height: <int>, bitrate: <int> }]
});

その他のイベント

イベント	説明	対象プレイヤー
`error`	再生中にシステムエラーが発生した際に呼び出される	v3, v4, v5
`html5_video_supported`	ブラウザの HTML5 Video 機能のサポート確認時に呼び出される	v3, v4, v5
`jumpstepchange`	スキップ間隔設定（早送り/巻き戻し）の時間単位変更時に発生	v3, v4, v5
`bookmark_change`	ブックマークの追加、更新、削除時に発生	v3
`next_episode_auto_change`	次の動画の自動再生設定の変更時に発生	v3, v4, v5
`next_episode_requested`	次の動画のコールバックがリクエストされた時点で発生	v3, v4, v5
`picture_in_picture_entered`	PIP（Picture-in-Picture）モードへの移行時に発生	v3, v4, v5
`picture_in_picture_leaved`	PIP モード終了時に発生	v3, v4, v5
`chapter_data_change`	チャプターデータの変更時に発生	v5

メソッドの使い方

Controller インスタンスを通じて生成されたオブジェクトで、プレイヤーの動作を直接制御できます。

基本的な呼び出し方法

個別の引数が不要な制御コマンドは、メソッドを直接呼び出します。

controller.play();

パラメーター渡し方法

設定値が必要な制御コマンドは、メソッドの引数としてパラメーターを渡します。

controller.set_volume(90);

メソッド一覧

イベントリスナーメソッド

メソッド	説明	対象プレイヤー
`on(event_name, callback)`	イベントリスナーの登録パラメーター `event_name` (`string`): イベント名 `callback` (`function`): イベント発生時に呼び出される関数戻り値: `VgControllerClient` インスタンス	v3, v4, v5
`off(event_name)`	特定のイベントに登録されたすべてのリスナーを一括削除パラメーター `event_name` (`string`): イベント名	v3, v4, v5

再生メソッド

メソッド	説明	対象プレイヤー
`play([start_at])`	再生開始パラメーター（オプション） `start_at` (`integer`, sec): 指定した時点から即座に再生呼び出し例再生開始: `controller.play();` 10 秒の時点から再生: `controller.play(10);`	v3, v4, v5
`pause()`	現在再生中のコンテンツを一時停止	v3, v4, v5
`toggle_pip()`	PIP（Picture-in-Picture）モードの有効化状態を切り替え	v3, v4, v5
`get_progress()`	現在の再生情報（`percent, position, duration`）を返す	v3, v4, v5

シーク（Seek）メソッド

メソッド	説明	対象プレイヤー
`ff()`	現在の再生位置から `set_jumpstep` メソッドで設定された `jumpstep` 分だけ前方に移動（早送り、デフォルト: 10 秒）	v3, v4, v5
`rw()`	現在の再生位置から `set_jumpstep` メソッドで設定された `jumpstep` 分だけ後方に移動（巻き戻し、デフォルト: 10 秒）	v3, v4, v5
`set_current_time(time)`	再生状態を維持しながら指定した時点に移動パラメーター `time` (`integer`, sec): 移動する時点	v3, v4, v5
`get_current_time()`	現在の再生位置を返す	v3, v4, v5
`set_jumpstep(jumpstep)`	`ff()` または `rw()` 呼び出し時に移動する時間間隔を設定パラメーター `jumpstep` (`integer`, sec): 移動する時間間隔	v3, v4, v5
`get_jumpstep()`	現在設定されている `jumpstep` 値を返す	v3, v4, v5
`set_keyframe_seek_default(is_default)`	キーフレーム単位の移動をデフォルトとして設定パラメーター `is_default` (`boolean`): デフォルトとして設定するかどうか	v2

play([start_at]) と set_current_time(time) の比較

play(10): 10 秒の位置に移動後、即座に再生を開始
set_current_time(10): 10 秒の位置に移動するが、既存の再生/一時停止状態を維持

音響メソッド

メソッド	説明	対象プレイヤー
`set_volume(volume)`	音量設定パラメーター `volume` (`integer`, 0〜100): 設定する音量	v3, v4, v5
`get_volume()`	現在設定されている音量を返す	v3, v4, v5
`mute()`	ミュート状態の切り替え（On/Off）	v3, v4, v5

画面メソッド

メソッド	説明	対象プレイヤー
`set_screen()`	フルスクリーンモードと通常モード間の切り替え（Firefox ブラウザは非対応）	v3, v4, v5
`get_screen()`	現在の画面モードを返す戻り値 `windowed`: 通常モード `fullscreen`: フルスクリーンモード	v3, v4, v5
`set_fullscreen_element(element)`	フルスクリーン切り替え時の対象 DOM 要素を設定パラメーター `element` (`string`): フルスクリーン切り替え対象の HTML 要素	v3, v4, v5
`enable_fullscreen_button()`	プレイヤー UI 内のフルスクリーン切り替えボタンを有効化	v3, v4, v5
`set_video_visibility(visibility)`	ビデオ画面の表示/非表示を設定（オーディオ再生は維持） `visibility` パラメーター詳細 `true`: 表示 `false`: 非表示	v3, v4, v5
`get_video_visibility()`	ビデオ画面の現在の表示状態を返す	v3, v4, v5
`set_ratio(type)`	画面の拡大および比率方式を設定 `type` パラメーター詳細 `contain`: 縦横比を維持しながら画面に合わせる `fill`: 比率に関わらず画面全体を埋める `enlargement`: 縦の長さを基準に合わせる（横スクロールが発生する場合あり）	v3, v4, v5

コントロールバーメソッド

メソッド	説明	対象プレイヤー
`set_control_visibility(visibility)`	内蔵コントロールバーの表示/非表示を設定	v3, v4, v5
`get_control_visibility()`	内蔵コントロールバーの現在の表示状態を返す	v3, v4, v5
`set_controls_inactive_time(time)`	コントロールバーの自動非表示待機時間を設定（`0`: 常時表示）	v3, v4, v5
`get_controls_inactive_time()`	設定されたコントロールバーの自動非表示時間を返す	v3, v4, v5
`set_controls_activity(activity)`	コントロールバーの有効化/無効化を設定	v3, v4, v5
`get_controls_activity()`	コントロールバーの有効化状態を返す	v3, v4, v5
`set_controlbar_progress_only(enable)`	プログレスバー（Progress Bar）のみ表示し、その他の制御ボタンを非表示にする	v3, v4, v5
`get_controlbar_progress_only()`	プログレスバー単独表示の設定状態を返す	v3, v4, v5
`set_controlbar_hide_playing(enable)`	再生中のコントロールバー自動非表示の有無を設定	v4, v5
`get_controlbar_hide_playing()`	再生中のコントロールバー自動非表示の設定状態を返す	v4, v5
`hide_controlbar_button(value)`	コントロールバーからボタンを非表示にする（`ready` イベント後に呼び出すことを推奨） `value` パラメーター詳細 `play`: 再生 `rewind`: 巻き戻し `forward`: 早送り `repeat`: 区間リピート `currenttime`: 現在の再生時間 `durationtime`: 総再生時間 `quality`: 画質 `playbackrate`: 再生速度 `mute`: ミュート `volume`: 音量グラフ `subtitle`: 字幕 `setting`: 設定 `fullscreen`: フルスクリーンモード `chat`: チャット `pip`: PIP モード `bigplay`: 中央再生ボタン（Kollus Web Player） `seekcontainer`: モバイルの左右巻き戻し/早送り（Kollus Web Player）	v3, v4, v5
`set_setting_panel_activity(activity)`	設定パネルの表示/非表示およびパネルの指定 `activity` パラメーター詳細 `true`: 表示 `false`: 非表示 `パネル名`: 指定した名前のパネルを表示	v3, v4, v5

hide_controlbar_button メソッドの呼び出し例

コントロールバーからフルスクリーンモードおよび設定ボタンを非表示にします。

controller.hide_controlbar_button(['fullscreen', 'setting']);

再生速度メソッド

メソッド	説明	対象プレイヤー
`set_speed(speed)`	再生速度を 0.5〜4 の範囲内で 0.1 単位で設定	v3, v4, v5
`get_speed()`	現在適用されている再生速度を文字列形式で返す	v3, v4, v5
`set_playback_rates(rates)`	プレイヤー UI に表示される再生速度グループを設定（下記のメソッド呼び出し例を参照）	v3, v4, v5
`get_playback_rates()`	現在設定されている再生速度グループを文字列形式で返す	v3, v4, v5

set_playback_rates メソッドの呼び出し例

単一配列: 再生速度オプションを一行で列挙して構成します。

controller.set_playback_rates([0.5, 1, 1.5, 2]);

二重配列: [再生速度配列, 表示する行（Row）数]

controller.set_playback_rates([[0.5, 1, 1.5, 2, 3, 4], 2]);

参考

iOS 環境で HLS 方式で視聴する場合、OS のポリシーおよび技術仕様により、最大 2 倍速までのみサポートされます。

区間リピートメソッド

メソッド	説明	対象プレイヤー
`set_repeat_start([position])`	区間リピートの開始時点を設定（引数を省略した場合、現在の再生位置を基準に設定）	v3, v4, v5
`set_repeat_end([position])`	区間リピートの終了時点を設定（引数を省略した場合、現在の再生位置を基準に設定）	v3, v4, v5
`unset_repeat()`	有効化されている区間リピート設定を解除し、通常再生モードに切り替え	v3, v4, v5
`get_repeat()`	現在の区間リピート状態情報（`status, start, end`）を返す	v3, v4, v5

set_repeat メソッドの呼び出し例

10 秒の時点をリピート開始地点として設定します。

controller.set_repeat_start(10);

20 秒の時点をリピート終了時点として設定します。

controller.set_repeat_end(20);

ブックマークメソッド

メソッド	説明	対象プレイヤー
`refresh_bookmark()`	サーバーから最新のブックマークリストを同期して更新	v3, v4, v5
`get_bookmark_count()`	すべてのブックマーク・公式ブックマーク・マイブックマークの件数（`all, index, user`）を返す	v3, v4, v5
`set_bookmark_add_activity(activation)`	ブックマーク追加ボタンの有効化/無効化を設定	v3, v4, v5
`set_bookmark_update_activity(activation)`	ブックマーク編集ボタンの有効化/無効化を設定	v3, v4, v5

Deprecated

set_bookmark_add_visibility および set_bookmark_update_visibility メソッドはサポートされなくなりました。上記の表に記載されている activation 系メソッドを使用してください。

字幕メソッド

メソッド	説明	対象プレイヤー
`set_subtitle(value)`	字幕データ（VTT URL または RawData）を直接設定	v3, v4, v5
`set_subtitle_visibility(visibility)`	メイン字幕の表示/非表示を設定	v3, v4, v5
`set_subtitle_sub_visibility(visibility)`	サブ字幕の表示/非表示を設定	v3, v4, v5
`set_subtitle_shadow_rect(is_rect)`	字幕の背景スタイルを設定	v3, v4, v5
`get_subtitle_shadow_rect()`	現在設定されている字幕の背景スタイル値を返す	v3, v4, v5
`set_subtitle_font_size(size)`	字幕のテキストサイズ（px）を設定	v3, v4, v5
`get_subtitle_font_size()`	現在設定されている字幕のテキストサイズを返す	v3, v4, v5
`set_subtitle_activity(activity)`	字幕の表示位置を設定	v3, v4, v5
`get_subtitle_activity()`	字幕の表示位置を返す	v3, v4, v5
`get_subtitles_list()`	全メイン字幕リストを返す	v3, v4, v5
`get_subtitles_sub_list()`	全サブ字幕リストを返す	v3, v4, v5
`set_current_subtitle(index)`	指定したインデックスのメイン字幕に切り替え	v3, v4, v5
`set_current_subtitle_sub(index)`	指定したインデックスのサブ字幕に切り替え	v3, v4, v5

チャプターメソッド

メソッド	説明	対象プレイヤー
`set_chapter_data(data)`	チャプターデータを設定	v5
`get_chapter_data()`	現在設定されているチャプターデータを返す	v5

set_chapter_data(data) の data パラメーターは URL String または JSON 形式のみ許可されます。

// URL String
controller.set_chapter_data('https://example.com/chapters.json');

// JSON
controller.set_chapter_data({
  "ko": [
    {
      "position": 0,
      "value": "first"
    },
    {
      "position": 30,
      "value": "second"
    }
  ],
  "default_language_code": "ko"
});

チャプターデータが変更されると、その他のイベントイベントが発生します。

ビットレートメソッド

メソッド	説明	対象プレイヤー
`set_bitrate(index)`	指定したインデックスのビットレートに切り替え。`set_bitrate()` メソッドで実際の変更をリクエストする際は、該当する配列インデックスに +1 した値を引数として渡す必要があります。（`0`: 自動）	v4, v5
`get_bitrate_data()`	利用可能なビットレートリストを返す。`get_bitrate_data()` を通じて返される配列のインデックスは 0 から始まります。	v4, v5

プレイヤー情報メソッド

メソッド	説明	対象プレイヤー
`get_player_id()`	Kollus プレイヤー ID を返す（`ready` イベント後に呼び出し可能）	v3, v4, v5
`get_hardware_id()`	ハードウェア ID を返す（`ready` イベント後に呼び出し可能）	v3
`get_player_type()`	現在実行中のプレイヤーの種類を返す戻り値 `v3`: HTML5 Player for PC (Hybrid) `v4`: HTML5 Player for All	v3, v4, v5
`get_video_info()`	コンテンツの解像度およびビットレート情報（`width, height, bitrate`）を返す（`ready` イベント後に呼び出し可能）	v3, v4, v5
`get_lms_data()`	学習管理システム（LMS）連携データを返す	v3, v4, v5
`get_hls_frag_data()`	HLS Fragment 関連データを返す	v4, v5
`dispose()`	プレイヤーインスタンスを削除	v4, v5

カスタムスキンメソッド

メソッド	説明	対象プレイヤー
`get_custom_skin()`	現在プレイヤーに適用されているカスタムスキン設定（JSON）を返す（`ready` イベント後に呼び出し可能）	v4, v5
`set_custom_skin(json_data)`	JSON 形式の設定データを注入してカスタムスキンを変更（`ready` イベント後に呼び出し可能）	v4, v5

set_custom_skin メソッドの呼び出し例

controller.set_custom_skin({
  controlbar: {
    enable: true,
    backgroundColor: 123123,
    backgroundAlpha: 0.2,
    progressButton: {
      enable: false
    }
  }
});

エラーメソッド

メソッド	説明	対象プレイヤー
`get_error_detail()`	現在発生しているエラーの詳細情報（`code, message, param`）を返す	v3, v4, v5
`set_custom_error(code, message, param)`	デフォルトのエラー画面の代わりに、開発者が定義したカスタムエラーコードとメッセージをプレイヤー UI に表示	v3, v4, v5

チャットメソッド

メソッド	説明	対象プレイヤー
`set_chat_config(value)`	チャット関連の設定を適用（`ready` イベント後に呼び出すことを推奨）	v3, v4, v5
`notify_visibleheight_changed(height)`	Android WebView 環境でキーボード有効化に伴う画面の高さ変化値を渡す	v3, v4, v5

set_chat_config メソッドの呼び出し例

controller.set_chat_config({
  customer_page: [{
    title: 'Class Title',
    url: 'https://example.com'
    // or
    // html: '<h2>Custom HTML</h2>'
  }]
});

参考

セキュリティポリシー: 外部ページを注入する際は、https プロトコルが適用された URL のみ許可されます。
スクリプト制約: html 属性で渡されたコンテンツ内の script タグは、セキュリティ上の理由から実行が制限されます。

クローズイベントメソッド

メソッド	説明	対象プレイヤー
`set_enable_close_event()`	ブラウザ終了（`close`）の検知およびコールバック機能を有効化	v3, v4, v5
`set_close_callback_fn(fn)`	ブラウザ終了時に実行するカスタムコールバック関数を登録	v3, v4, v5
`get_enable_close_event()`	ブラウザ終了（`close`）コールバックの有効化状態を返す	v3, v4, v5
`set_close_button(enable, fn)`	モバイル用閉じるボタンの生成およびクリックイベントの設定（`ready` イベント後に呼び出すことを推奨）	v4, v5

その他のメソッド

メソッド	説明	対象プレイヤー
`set_vr_overlay(options)`	iOS 環境内での VR コンテンツ再生のための権限リクエストオーバーレイを設定	v3, v4, v5
`debug()`	プレイヤーのデバッグログデータをコンソールに出力	v5
`set_short_key(enable)`	プレイヤーのショートカットの有効化/無効化を設定	v2
`get_topmost()`	プレイヤーウィンドウの最前面表示の設定状態を返す	v2
`set_topmost(topmost)`	プレイヤーウィンドウの最前面表示の有無を設定	v2
`set_lms_check()`	ブラウザ終了時の LMS データ転送完了確認の設定	v2

モバイル VR コンテンツ再生時の注意事項

モバイルブラウザのセキュリティポリシーおよび iframe 環境の技術的制約により、VR（360°）コンテンツを再生する際は以下の事項を確認する必要があります。

Android: iframe 内でデバイスの orientation（向き）情報の同期に問題があるため、VR 映像の左右操作方向が実際のデバイスの動きと逆に動作する現象が発生する場合があります。
iOS: iOS 13 から、セキュリティ強化のため DeviceMotion（加速度/ジャイロ）データへのアクセスにはユーザーの承認が必須です。ただし、ブラウザのセキュリティポリシーにより iframe 内部では権限リクエストポップアップの呼び出しが制限されるため、VR 操作機能が動作しません。

解決方法

VG Controller 1.1.10 以上のバージョンを使用してください。
iOS 環境では set_vr_overlay() メソッドを必ず呼び出してください。

var controller = new VgControllerClient({
  // Specify the top-level parent window containing the player iframe
  target_window: player.contentWindow
});
controller.set_vr_overlay({
  // Specify the target DOM element to display the permission request overlay
  target_element: document.getElementById('player'),
  // Set a custom message to guide users to grant motion and gyro sensor permissions
  permission_request_help_message: 'Please allow access to the accelerometer and gyroscope sensors to use VR features.'
});

Issue

iOS 13.4 以上のバージョンの場合、Apple のプライバシーポリシーにより DeviceMotion API の rotationRate 値が正常に返されません。

概要​

主な特徴​

用語定義​

ライブラリのインストールと初期化​

基本実装例​

注意事項​

例外コード​

CDN パス​

最新バージョンの自動適用​

特定バージョンの固定​

セキュリティ強化（SRI 適用）​

イベントリスニング​

リスナー登録方法​

単一リスナー​

複数リスナー​

メソッドチェーン（Method Chaining）​

イベント一覧​

再生状態イベント​

進行率（Progress）イベント​

progress パラメーター詳細​

シーク（Seek）イベント​

音響イベント​

muted パラメーター詳細​

volumechange パラメーター詳細​

再生速度イベント​

speedchange パラメーター詳細​

画面イベント​

screenchange パラメーター詳細​

device_orientation_changed パラメーター詳細​

字幕イベント​

ストリーミングイベント​

bitrate_data 形式の例​

その他のイベント​

メソッドの使い方​

基本的な呼び出し方法​

パラメーター渡し方法​

メソッド一覧​

イベントリスナーメソッド​

再生メソッド​

シーク（Seek）メソッド​

音響メソッド​

画面メソッド​

コントロールバーメソッド​

hide_controlbar_button メソッドの呼び出し例​

再生速度メソッド​

set_playback_rates メソッドの呼び出し例​

区間リピートメソッド​

set_repeat メソッドの呼び出し例​

ブックマークメソッド​

字幕メソッド​

チャプターメソッド​

ビットレートメソッド​

プレイヤー情報メソッド​

カスタムスキンメソッド​

set_custom_skin メソッドの呼び出し例​

エラーメソッド​

チャットメソッド​

set_chat_config メソッドの呼び出し例​

クローズイベントメソッド​

その他のメソッド​

モバイル VR コンテンツ再生時の注意事項​

解決方法​

概要