> For the complete documentation index, see [llms.txt](https://catenoid-support.gitbook.io/kollus-player-jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://catenoid-support.gitbook.io/kollus-player-jp/kollus-video-player/mobile-player-ui-appudto-html5-ios-android.md).

# Mobile player UI アップデート | HTML5 | iOS, Android

{% hint style="info" icon="bullhorn" %}

## 新しいKollus Docsサイトにて、本ドキュメントの最新バージョンをご確認いただけます。

本ドキュメントは旧バージョンです。より正確で最新の情報は、以下の新しいリンク先よりご確認ください。

* **新ドキュメント（最新版）**：[モバイル環境](https://docs.kollus.com/ja/service-guide/vod/kollus-player/ui-shortcut/#%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E7%92%B0%E5%A2%83)
* **提供終了のご案内**：本ドキュメントは2026年11月5日をもって公開を終了いたします。
  {% endhint %}

モバイル向けHTML5 Player UIが一部改善されました。\
この内容はモバイルデバイス(スマートフォン)でWebブラウザ環境で視聴する場合に該当します。\
(From 2021.03.11) <br>

**現在 (AS IS)**&#x20;

<figure><img src="https://2720340067-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXHZoCETN8il08lqOg2xv%2Fuploads%2FYPsULMiex1PuhoXLQUw9%2Fmobileui1.jpg?alt=media&amp;token=1df3467f-ca79-4971-9541-d5306a3b2255" alt=""><figcaption></figcaption></figure>

**変更後 (TO-BE)**&#x20;

<figure><img src="https://2720340067-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXHZoCETN8il08lqOg2xv%2Fuploads%2FvGaAT71vbyuTYFSP0fiZ%2Fmobileui2.jpg?alt=media&amp;token=31b73f38-0e29-4c5c-999a-676c8430eb3a" alt=""><figcaption></figcaption></figure>

#### 主要更新内容 1- スキップ / 巻き戻し (ダブルタップ SEEK)  <a href="#mobileplayeruiappudtohtml5iosandroid-1-sukippukishidaburutappuseek" id="mobileplayeruiappudtohtml5iosandroid-1-sukippukishidaburutappuseek"></a>

<figure><img src="https://2720340067-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXHZoCETN8il08lqOg2xv%2Fuploads%2FoAXo5RjMBMxYHitxN0gP%2Fmobileui5.jpg?alt=media&amp;token=ec092e65-e073-4518-9518-73ceba3667fc" alt=""><figcaption></figcaption></figure>

* タップで再生時点から10秒単位の前後に移動する機能を実装します。&#x20;
* 2回タップで10秒, 3回タップで20秒, 4回タップで30秒のよう、タップ回数を追加すると10秒ずつ移動範囲が増加します。

#### 主要更新内容 2- コントロールバー (control bar) 及びメニュー    <a href="#mobileplayeruiappudtohtml5iosandroid-2-kontorrubcontrolbarbimeny" id="mobileplayeruiappudtohtml5iosandroid-2-kontorrubcontrolbarbimeny"></a>

<figure><img src="https://2720340067-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXHZoCETN8il08lqOg2xv%2Fuploads%2Fs7etotSeHdZ9m4G2dUtZ%2Fmobileui6.jpg?alt=media&amp;token=55def07b-d91a-4d08-9198-c4be6f557130" alt=""><figcaption></figcaption></figure>

* 今までコントロールバーに配置した機能を別途タブで統合し、もっと画面自体に集中できるように変更しました。&#x20;
* 倍速, リピート, ブックマーク, 字幕設定などの既存のメニューは右下のボタンをタップした際に表示されるサイドバーに配置されています。 &#x20;

#### 主要更新内容 3- サムネイル / フレーム移動の利便性改善 <a href="#mobileplayeruiappudtohtml5iosandroid-3-samuneirufurmuno" id="mobileplayeruiappudtohtml5iosandroid-3-samuneirufurmuno"></a>

<figure><img src="https://2720340067-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXHZoCETN8il08lqOg2xv%2Fuploads%2FaKjmC8Bkt35aBdljDuYp%2Fmobileui7.jpg?alt=media&amp;token=02df144c-7dc2-4947-953b-ad9a2f7e41fd" alt=""><figcaption></figcaption></figure>

* サムネイルを拡大し、移動したいフレームの確認をより簡単に確認・移動することができます。&#x20;
* 以下のQRから変更されたUI/UXを確認してください。&#x20;

![](https://chart.googleapis.com/chart?cht=qr\&chs=100x100\&chld=L%7C1\&choe=UTF-8\&chl=http%3A%2F%2Fv.jp.kollus.com%2FSD7Mhk4S)

#### 参照 | Player Skin (Styling)  <a href="#mobileplayeruiappudtohtml5iosandroid-playerskinstyling" id="mobileplayeruiappudtohtml5iosandroid-playerskinstyling"></a>

<figure><img src="https://2720340067-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXHZoCETN8il08lqOg2xv%2Fuploads%2FufW693jd4TZAABZftOlb%2Fplayerskinui.jpg?alt=media&amp;token=16c22a62-4aa3-4984-807c-82d6670fe27d" alt=""><figcaption></figcaption></figure>

* VOD コンソール > 設定 > プレーヤースキン/広告メニューからカスタマイズしたPlayer Skinを適用することができます。設定した内容は即時に適用されます。&#x20;
  * [Player Skin](https://catenoid-support.gitbook.io/kollus-player-jp/kollus-video-player/player-skin)

<br>