> 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

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

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

<figure><img src="/files/cBknVR7ReugE6tAH2F4h" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/YuTGNpVEpoGyyoabxTzv" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/dvhcgoxEmg2ahGDbZiG3" 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="/files/MpzDlHgeTb25chNlLYo6" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/GOezze4ZgwekHfCy2XyZ" 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="/files/dSbGNCc4pBUiCXosekh8" alt=""><figcaption></figcaption></figure>

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

<br>