メインコンテンツまでスキップ

Web Player Controller

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

主な特徴​

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

用語定義​

このドキュメントで使用する主要な技術用語とプレイヤー表記についての定義です。(詳細情報: Kollus プレイヤーの種類)

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

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

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

基本実装例​

<script src="https://file.kollus.com/wpcontroller/web-player-controller-client.latest.min.js"></script>
<script>
window.onload = function () {
  try {
    var controller = new WebPlayerControllerClient({
      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 ごとに個別のインスタンスを生成する必要があります。

例外コード​

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

コードメッセージ説明
-99This browser does not support postMessage APIpostMessage APIをサポートしていないブラウザ
-98Player type must be one of v2, v3, v4 and v5無効なプレイヤータイプ（v2, v3, v4, v5のみサポート）
-97Event listener is not callable呼び出し不可能なイベントリスナー（有効な関数ではない）
-96Target window is not found対象の Window オブジェクトが見つかりません
-95Custom skin is not supportedカスタムスキン非対応
-1*その他の postMessage API 例外

CDN パス​

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

パス変更のご案内

従来の「VG Controller」の名称が「Web Player Controller」に変更されました。既存のパスも引き続きご利用いただけますが、新規機能のアップデートが制限されるため、継続的な最新機能サポートを受けるには新しいパスのご利用を推奨いたします。

  • 既存パス: https://file.kollus.com/vgcontroller/vg-controller-client.{version}.min.js
  • 新規パス: https://file.kollus.com/wpcontroller/web-player-controller-client.{version}.min.js

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

<script src="https://file.kollus.com/wpcontroller/web-player-controller-client.latest.min.js"></script>

特定バージョンの固定​

<script src="https://file.kollus.com/wpcontroller/web-player-controller-client.{version}.min.js"></script>

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

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

<script src="https://file.kollus.com/wpcontroller/web-player-controller-client.{version}.min.js"
  integrity="sha256-esUCCL4RPYMS8AR+Sl3lNrFa5M+zgpt4Gb77qtz66OY="
  crossorigin="anonymous">
</script>
バージョン別 Integrity Code
バージョンIntegrity Code
3.0.7sha384-s4QrCGcyFWEQmJsr0iK1A3HSjah8VE8Zq48k0jxHHUFOCsshRFRT1kNgj/xY/QPO
3.0.6sha384-GdgPx9dCVTR5LL/T/CRoUPK1Af8Ss0uuHrG9m8A9ZjfwvgOBP2Hn0FpJOpbKxc2y
3.0.5sha384-r4w31weNrojq8zcLil+4GUls/WL09DTxjgrTyBNz1D8lctVLId2QGiTrh1jq3AuK
3.0.4sha384-XReEw9S0i2G9sfZyY3GOzLxC4XVfupJ3coBxfyT6rW7uowVbox9jddVW3e4HPdfI
3.0.3sha384-vmOxuvAuxL9FhXfuWUtWy8+Bza8yMfKzM2YZd9nl+IBfO402BQqv7r9L7rzyCg3J
3.0.2sha384-JSsUl7m8gxMpuk9IhIoILT6hHINhUzOK1/fKQmMLczpK8ad0iAlz53sTVJxG4ZEQ
3.0.1sha384-TfZVDcnfT4uqCCeXU1MAM3L+8QhlduK94+2ukm5/TU8SmFfJusmzSFr+eW1nNzx5
3.0.0sha384-Zu3WwunWVyaqnMrkKBjhgXL5dYyHK4U6XrtUvRVkLdXBSBOJrOw6/EGrsB9Yaw57
2.0.2sha384-rD/iy3kIQHyXISy6nUBDw+m9ITNCXEiCNVO+6xGTuAKhSBRaCloGhKRJU9F14PhW
2.0.1sha384-90u5dxpIgg4TvsndT8r1j54hjn302/IRkwzAeEQDq3zeWezi1VVjHGXyS4MBLbuC
2.0.0sha384-aifzvq3KnpoCh/8DaG5t/PreNEXgAUUOsSuOsL0MHO6ZYvKSPkWpfRXbM3mB62Qx
1.6.2sha256-0PBHq7Y0DcK/F1PGmAybxZh1NLL5AP89//qiSsTaR84=
1.6.1sha256-CyKubDJ/UhR0QZbNpapLJ+eb3cxgS1Q9xUe0YUu3Yzs=
1.6.0sha256-D+uxBOAbz5FeHAlzHxIb6pZm0OH2POTSJM8q7lVIAvw=
1.5.1sha256-8X2N8jt72DqHSjlXad5eiArLfGXP8Br6W2CukrzzT/o=
1.5.0sha256-bP2RqUMWigIFnYO5jpgwS9i+yrXRqsyMKOT34TEQSgc=
1.4.2sha256-0jaAeov9h/kDevNySYTfIs3gd3uwqdR5KGF05kEtN30=
1.4.1sha256-VVBBfWTrTqxPWkhAdCqrfkmawZyX0pmVEN5Ao1fK6yI=
1.4.0sha256-aVGw8cCTLjL4ommgpWzXY/ZdNoxnIVkQOpyFkBF9hvg=
1.3.0sha256-KEzr9IDpxMYIPheF9clyiVrwfXCOrahMu9ZRAS1nyTc=
1.2.8sha256-QsoI2nF9ArX728ZciKU5W58AAqm3tTJs2qPVVq1rw2k=
1.2.7sha256-GrSA/4PPdqMAlJ1+yU6kNyLUKSkI/yao8qB/CdpgHLg=
1.2.6sha256-p7sZuwAm+snPLJcKXhM19bcJAFblc/N7FIr+KbLOyiM=
1.2.5sha256-8H84AFVTk2ecP6BvSwDZwKdb+wax7eCODMabRjtYFG4=
1.2.4sha256-byGt/vmYwvCJ5JSUTUKYSM3NJvTCAkwAcQjRPYA7OfU=
1.2.3sha256-gELbkblxei35tOlrZxsBGTxjErybUM8dd7ToRpw9AH4=
1.2.2sha256-ZqrlMRldpWxcvsbTmjJ0EbUnpvRPBOY2Y26lGrF8p5g=
1.2.1sha256-QDMKykvp9W0VqeIcE8Z66aDga51Bil4dbKyu+xhVYU8=
1.1.19sha256-a0JNjidB76X3hqapRctQlBEYT7UplG6rSTYdeORsoo4=
1.1.18sha256-dQ+ubgLE/ZCuAF3gsq4aiEuXwIPtmMgFKho0VfMg618=
1.1.17sha256-7BYchZl3hCp8pAmQWyvtrddOiSq6jiEV/3rigiHh2Hc=
1.1.16sha256-sSwregT7/iEaiS3SWkUw2n+ifhAJaC9z1SUhxM4iA6A=
1.1.15sha256-rXuiAt3HjeCdCoTPCdNnud6tXyM0QnFoG4wVohJX/vo=
1.1.14sha256-gWFSHnUUnRrD9uI+jupozk4UaYI+rTNrutx2DoICd9Q=
1.1.13sha256-5O+p4Fj23xbBoe1uiVqYWaLo7m423e8E3eJPLs7ZXac=
1.1.12sha256-xeXyA4xBrv11fpQ4OooLjlh/wA+lMW7fv8LQ3InbZt0=
1.1.11sha256-cqT+zCkG9IrFD5YBYgW/2uryxmX9xfjBArGvE7XxEGU=
1.1.10sha256-ArDmq7qhhyH1jPcmp9AceymlnmdzL/fcLuj+7Cd9qGA=
1.1.9sha256-gWFSHnUUnRrD9uI+jupozk4UaYI+rTNrutx2DoICd9Q=
1.1.8sha256-1qLSiIaxaFInegLeM4YYFvNjkfS1ljnTkeLIVB4N9yA=
1.1.7sha256-h3FJeZn9qzc36yGdCexZWCR00PYain1kA8YxOo1RYdE=
1.1.6sha256-V6e7g4znlH2R6mS4iZG+ICEEqUuzT2I0WQebNKZapIs=
1.1.5sha256-ylu1Lig3obBjhaxhPGokQ218NYrOMtGTSF98cC3wuJM=
1.1.4sha256-YjHHosJQBjbhyZR0+3fDAc5YAU0f6fOcOzK5fWuh/vM=
1.1.3sha256-imuCUkIbY1leNcPL4k9Jj06Nsl5zeG7qG7A2qsxNzY8=
1.1.2sha256-OyniGO0Qw8YtUR1Lc1jquxyzd2E2W8XlhwWV2lSkD9w=
1.1.1sha256-KYhE+CIgE9hl1e+AO7wVv25P3ZHjkhfw1u+UxOmcu8w=
1.1.0sha256-U9z4sQc8f3gU3EU8z17mib/XsZNAQTPJfNiv1ZSy708=
1.0.6sha256-Lraa1NkO1eo0APSSCyEkHtfhK7PP8U4mG8JTgcOpdkg=
1.0.5sha256-8pO9uPazQtQ5RmZuzI053S3siu1Zi73nLPHbN0yCUso=
1.0.4sha256-ki4kmvmPXsvtI8VKngskOtm9rxOlTKHxD8NJQjnYJzI=
1.0.3sha256-M27rCu4/1FrzE9IabhMXQB3+bL5lzgBDg7gt6SZo1OI=
1.0.2sha256-AAMmt+wOnoGhdBmrvEQP/TRRv40zYfxtvx9M3BrATZA=

イベントリスニング​

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）イベント​

注意

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

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

progress パラメーター詳細​

パラメータータイプ説明
percentinteger現在の再生進行率（0〜100）
positionnumber現在の再生位置（sec）
durationnumberコンテンツの全体の長さ（sec）
controller.on('progress', function(percent, position, duration) {
  console.log(percent + '%', position + 'sec');
});

シーク（Seek）イベント​

イベント説明対応プレイヤー
seekingユーザーが再生位置の移動を開始した時点で発生v4, v5
seeked再生位置の移動操作が完了した時点で発生v4, v5
seek_start再生位置の移動が検出された最初の時点で発生v4, v5
jumpstepchangeスキップ間隔設定（早送り/巻き戻し）の時間単位変更時に発生v3, v4, v5

音響イベント​

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

muted パラメーター詳細​

パラメータータイプ説明
is_mutedboolean
  • true: ミュート適用
  • false: ミュート解除

volumechange パラメーター詳細​

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

再生速度イベント​

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

speedchange パラメーター詳細​

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

画面・UIイベント​

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

screenchange パラメーター詳細​

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

device_orientation_changed パラメーター詳細​

パラメータータイプ説明
orientationstring
  • Portrait: 縦向き
  • Landscape: 横向き

字幕イベント​

イベント説明対応プレイヤー
subtitle_load_done字幕ファイルの読み込み完了時に発生v3, v4, v5
subtitle_list_changeメイン字幕リスト変更時に発生v5
subtitle_sub_list_changeサブ字幕リスト変更時に発生v5
subtitle_cue_data_change字幕 Cue データ変更時に発生v5
subtitlevisibilitychangeメイン字幕の表示状態(On/Off)変更時に発生v3, v4, v5
subtitle_sub_visibilitychangeサブ字幕の表示状態(On/Off)変更時に発生v3, v4, v5
subtitle_sizechangeメイン字幕のフォントサイズ変更時に発生v3, v4, v5
subtitle_sub_sizechangeサブ字幕のフォントサイズ変更時に発生v3, v4, v5
subtitle_shadow_rect_changeメイン字幕の背景スタイル変更時に発生v3, v4, v5
subtitle_sub_shadow_rect_changeサブ字幕の背景スタイル変更時に発生v3, v4, v5

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

イベント説明対応プレイヤー
streaming_manifest_loadedHLS または DASH Manifest ファイルの読み込み完了時に発生v5
hls_manifest_loadedHLS Manifest ファイルの読み込み完了時に発生（streaming_manifest_loadedの使用を推奨）v4, v5
dash_manifest_loadedDASH Manifest ファイルの読み込み完了時に発生（streaming_manifest_loadedの使用を推奨）v4, v5
streaming_frag_changedストリーミング Fragment 変更時に発生v5
hlsfragchangeHLS Fragment 変更時に発生（streaming_frag_changedの使用を推奨）v4, v5
bitrate_data_loadedビットレートデータの読み込み完了時に発生（昇順ソート）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
repeat_stat_change区間リピート状態の変更時に発生v3, v4, v5
bookmark_changeブックマークの追加および変更時に発生 (v3は削除時にも発生)v3, v4, v5
next_episode_auto_change次のエピソードの自動再生設定の変更時に発生v3, v4, v5
next_episode_requested次のエピソードのコールバックがリクエストされた時点で発生v3, v4, v5
chapter_data_changeチャプターデータの変更時に発生v5

repeat_stat_change 例​

controller.on('repeat_stat_change', function (data) {
  // - end: 区間リピート終了時点 (sec)
  // - start: 区間リピート開始時点 (sec)
  // - status: 区間リピート状態
});

メソッドの使い方​

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

基本的な呼び出し方法​

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

controller.play();

パラメーター渡し方法​

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

controller.set_volume(90);

メソッド一覧​

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

メソッド説明対応プレイヤー
on(event_name, callback)イベントリスナーの登録
  • パラメーター
    • event_name (string): イベント名
    • callback (function): イベント発生時に呼び出される関数
  • 戻り値: WebPlayerControllerClient インスタンス
v3, v4, v5
once(event_name, callback)1回のみ実行されるイベントリスナーを登録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
get_progress()現在の再生情報（percent, position, duration）を返すv3, v4, v5
get_next_episode_auto()次のエピソードの自動再生が有効かどうか(boolean)を返却v3, v4, v5
set_next_episode_auto(is_auto)次のエピソードの自動再生を有効/無効に設定
  • パラメーター
    • is_auto (boolean): 自動再生の有効/無効
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 秒の位置に移動するが、既存の再生/一時停止状態を維持

音響メソッド​

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

画面メソッド​

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

以下のメソッドは現在メンテナンスを行っておりませんので、代替メソッドをご使用ください。

  • enable_fullscreen_button() ➔ enable_virtual_fullscreen()

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

メソッド説明対応プレイヤー
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_activation / set_bookmark_add_visibility ➔ set_bookmark_add_activity(activation)
  • set_bookmark_update_activation / set_bookmark_update_visibility ➔ set_bookmark_update_activity(activation)

字幕メソッド​

メソッド説明対応プレイヤー
set_subtitle(value)字幕データ（VTT URL または RawData）を直接設定v3, v4, v5
get_subtitles_list(type)全メイン字幕リストを返すv3, v4, v5
set_current_subtitle(index, type)指定したインデックスのメイン字幕に切り替えv3, v4, v5
set_subtitle_visibility(visibility, type)字幕の表示/非表示を設定
  • visibility: true(字幕表示), false(字幕非表示)
  • type: 'main'(メイン字幕, デフォルト), 'sub'(サブ字幕)
v3, v4, v5
get_subtitle_font_size(type)現在設定されている字幕のテキストサイズを返す
  • type パラメータ詳細
    • 'main'（デフォルト）: メイン字幕
    • 'sub': サブ字幕
v3, v4, v5
set_subtitle_font_size(size, type)字幕のテキストサイズ（px）を設定v3, v4, v5
get_subtitle_shadow_rect(type)現在設定されている字幕の背景スタイル値を返す
  • 戻り値
    • true: 不透明な四角形
    • false: 文字の縁取りシャドウ
v3, v4, v5
set_subtitle_shadow_rect(is_rect, type)字幕の背景スタイルを設定
  • is_rect パラメータ詳細
    • true: 不透明な四角形
    • false: 文字の縁取りシャドウ
  • type パラメータ詳細
    • 'main'（デフォルト）: メイン字幕
    • 'sub': サブ字幕
v3, v4, v5
get_subtitle_activity()字幕の表示位置を返すv3, v4, v5
set_subtitle_activity(activity)字幕の表示位置を設定v3, v4, v5
Deprecated

以下のメソッドは現在メンテナンスを行っておりませんので、代替メソッドをご使用ください。

  • get_subtitles_sub_list() ➔ get_subtitles_list(type)
  • set_current_subtitle_sub(index) ➔ set_current_subtitle(index, type)
  • set_subtitle_sub_visibility(visibility) ➔ set_subtitle_visibility(visibility, type)
  • get_subtitle_sub_font_size() ➔ get_subtitle_font_size(type)
  • set_subtitle_sub_font_size(size) ➔ set_subtitle_font_size(size, type)
  • get_subtitle_sub_shadow_rect() ➔ get_subtitle_shadow_rect(type)
  • set_subtitle_sub_shadow_rect(is_rect) ➔ set_subtitle_shadow_rect(is_rect, type)

チャプターメソッド​

メソッド説明対応プレイヤー
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_type()現在実行中のプレイヤータイプを返却
  • 戻り値
    • v3: HTML5 Player for PC (Hybrid)
    • v4: HTML5 Player for All
v3, v4, v5
get_player_id()Kollus プレイヤー ID を返却 (ready イベント発生後に呼び出し可能)v3, v4, v5
get_hardware_id()ハードウェア ID を返却 (ready イベント発生後に呼び出し可能)v3
get_agent_version()プレイヤーエージェントのバージョンを返却 (ready イベント発生後に呼び出し可能、暗号化コンテンツの再生時のみ有効)v5
get_video_info()コンテンツの解像度およびビットレート情報 (width, height, bitrate) を返却 (ready イベント発生後に呼び出し可能)v3, v4, v5
get_lms_data(callback)LMS データを返却
  • パラメータ
    • callback (function): LMS データ (data オブジェクト) を引数として受け取るコールバック関数
v3, v4, v5
get_streaming_frag_data()HLS/DASH Fragment 関連データを返却v5
get_streaming_manifest_data()HLS/DASH Manifest 関連データを返却v5
get_hls_frag_data()HLS Fragment 関連データを返却 (v5 使用時は get_streaming_frag_data() の使用を推奨)v4, v5
dispose()プレイヤーインスタンスおよびリソースを解放v4, v5
Deprecated

以下のメソッドは現在メンテナンスを行っておりませんので、代替メソッドをご使用ください。

  • get_hls_frag_data() ➔ get_streaming_frag_data()

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

メソッド説明対応プレイヤー
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 タグは、セキュリティ上の理由から実行が制限されます。

close イベントメソッド​

メソッド説明対応プレイヤー
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 操作機能が動作しません。

解決方法​

  • Web Player Controller 1.1.10 以上のバージョンを使用してください。
  • iOS 環境では set_vr_overlay() メソッドを必ず呼び出してください。
var controller = new WebPlayerControllerClient({
  // 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 値が正常に返されません。