FRMSKI開発ブログ

AWS、iOS、AR/VRなど開発メモ

【iOSデザインガイドライン】iOSビデオのビューモードについて...ビデオ和訳

iOSのヒューマン・インターフェース・ガイドライン、ビジュアル・デザインのビデオについてのガイドラインを和訳しました。

ビデオ

 システム提供のビデオプレーヤーは、フルスクリーン(アスペクトフィル)と画面にフィット(アスペクト)の2つの表示モードを提供します。デフォルトでは、ビデオのアスペクト比に基づいて表示モードが選択され、ユーザーは再生中にモードを切り替えることができます。開発者ガイダンスについては、AVPlayerViewController(AVPlayerViewController - AVKit | Apple Developer Documentation)を参照してください。

  • フルスクリーン(アスペクト・フィル)表示モード
     ビデオはディスプレイに表示されます。エッジの切り抜きが発生することがあります。これはワイドビデオ(2:1〜2.40:1)のデフォルトの表示モードです。デベロッパー向けのガイダンスについては、resizeAspectFill(resizeAspectFill - AVLayerVideoGravity | Apple Developer Documentation)を参照してください。

  • 画面に合わせた(アスペクト)表示モード
     ビデオ全体が画面に表示されます。レターボックスやピラボックスが発生します。これは、標準ビデオ(4:3,16:9、および最大2:1)および超広域ビデオ(2.40:1を超えるもの)のデフォルトの表示モードです。デベロッパー向けのガイダンスについては、resizeAspect(resizeAspect - AVLayerVideoGravity | Apple Developer Documentation)を参照してください。

iPhone XSでの表示モードの例

 カスタムビデオプレーヤーが期待どおりに動作することを確認します。目的は、フルスクリーンデバイスでビデオコンテンツを再生するときに、デフォルトでディスプレイを埋めることです。ただし、ディスプレイを塗りすぎてクロッピングが発生する場合は、画面に合わせてビデオを拡大縮小する必要があります。また、個々の好みに基づいて、フルスクリーンと画面に合わせて表示を切り替えることもできます。デベロッパー向けのガイダンスについては、AVPlayerLayer(AVPlayerLayer - AVFoundation | Apple Developer Documentation)を参照してください。

iPhone XSでのパディングの例

 常に元のアスペクト比でビデオコンテンツを表示します。ビデオコンテンツが特定のアスペクト比に合致するように埋め込みレターボックスまたはピラーボックスのパディングを使用する場合、iOSはユーザーの視聴モードの選択に基づいてビデオを正確に拡大/縮小できません。ビデオフレーム内に埋め込まれた埋め込みによって、フルスクリーンモードと画面にフィットするモードでビデオが小さく表示されることがあります。また、iPadのピクチャインピクチャモード(Multitasking - System Capabilities - iOS - Human Interface Guidelines - Apple Developer)のように、ビデオがエッジからエッジ、フルスクリーンでないコンテキストで正しく表示されないようにします。