ビューベースの UI のスタートガイド
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
依存関係を追加する
Kotlin
implementation("androidx.media3:media3-ui:1.8.0")
Groovy
implementation "androidx.media3:media3-ui:1.8.0"
PlayerView
最も重要なコンポーネントは、メディア再生用のビューである PlayerView
です。PlayerView
は、再生中に動画、画像、字幕、アルバムアートを表示し、再生コントロールも表示します。
PlayerView
には、Player
インスタンスをアタッチおよびデタッチ(null
を渡す)するための setPlayer()
メソッドがあります。
PlayerView
は、動画、画像、音声の再生に使用できます。動画再生の場合は動画と字幕をレンダリングし、画像再生の場合はビットマップをレンダリングします。また、音声ファイルのメタデータとして含まれているアートワークを表示することもできます。他の UI コンポーネントと同じように、レイアウト ファイルに含めることができます。たとえば、PlayerView
は次の XML で含めることができます。
<androidx.media3.ui.PlayerView
android:id="@+id/player_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:show_buffering="when_playing"
app:show_shuffle_button="true"/>
上記のスニペットは、PlayerView
が複数の属性を提供していることを示しています。これらの属性を使用して、ビューの動作と外観をカスタマイズできます。これらの属性のほとんどには、対応するセッター メソッドがあり、実行時にビューをカスタマイズするために使用できます。PlayerView
のドキュメントには、これらの属性とセッター メソッドが詳しく記載されています。
より快適なユーザー エクスペリエンスを実現するには、ExoPlayer を使用している場合は keepScreenOn
Android 属性を追加するか、ウェイクロックを設定することを検討してください。デバイスをスリープ状態にしない他のアクションについては、バックグラウンド処理のページで調べることができます。
android:keepScreenOn="true"
レイアウト ファイルでビューを宣言したら、アクティビティの onCreate
メソッドで検索できます。
Kotlin
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// ...
playerView = findViewById(R.id.player_view)
}
Java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// ...
playerView = findViewById(R.id.player_view);
}
プレーヤーが初期化されたら、setPlayer
を呼び出してビューに接続できます。
Kotlin
// Instantiate the player.
val player = ExoPlayer.Builder(context).build()
// Attach player to the view.
playerView.player = player
// Set the media item to be played.
player.setMediaItem(mediaItem)
// Prepare the player.
player.prepare()
Java
// Instantiate the player.
player = new ExoPlayer.Builder(context).build();
// Attach player to the view.
playerView.setPlayer(player);
// Set the media item to be played.
player.setMediaItem(mediaItem);
// Prepare the player.
player.prepare();
PlayerControlView
PlayerControlView
は、再生を制御するための進行状況バーとボタンを含む PlayerView
サブビューの 1 つです。PlayerControlView
は、PlayerView
の外部でスタンドアロン コンポーネントとして使用することを想定していません。PlayerView
で属性を設定する(PlayerControlView
に渡されます)か、android:id="@id/exo_controller
でカスタム コントローラを指定することで、カスタマイズできます。
サーフェス タイプを選択する
PlayerView
の surface_type
属性を使用すると、動画再生に使用されるサーフェスのタイプを設定できます。使用できる値は、surface_view
、texture_view
、spherical_gl_surface_view
(球体動画の再生用の特別な値)、video_decoder_gl_surface_view
(拡張レンダラを使用した動画レンダリング用)、none
(音声再生専用)です。選択するサーフェス タイプについて詳しくは、サーフェスのページをご覧ください。
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2025-08-27 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-08-27 UTC。"],[],[],null,["Add the dependency \n\nKotlin \n\n```kotlin\nimplementation(\"androidx.media3:media3-ui:1.8.0\")\n```\n\nGroovy \n\n```groovy\nimplementation \"androidx.media3:media3-ui:1.8.0\"\n```\n\nPlayerView\n\nThe most important component is [`PlayerView`](/reference/androidx/media3/ui/PlayerView), a view for media playback.\n`PlayerView` displays video, images, subtitles, and album art during playback,\nas well as playback controls.\n\n`PlayerView` has a [`setPlayer()`](/reference/androidx/media3/ui/PlayerView#setPlayer(androidx.media3.common.Player)) method for attaching and detaching (by\npassing `null`) [`Player`](/reference/androidx/media3/common/Player) instances.\n\n`PlayerView` can be used for both video, image and audio playbacks. It renders\nvideo and subtitles in the case of video playback, bitmaps for image playback\nand can display artwork included as metadata in audio files. You can include it\nin your layout files like any other UI component. For example, a `PlayerView`\ncan be included with the following XML: \n\n \u003candroidx.media3.ui.PlayerView\n android:id=\"@+id/player_view\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n app:show_buffering=\"when_playing\"\n app:show_shuffle_button=\"true\"/\u003e\n\nThe snippet above illustrates that `PlayerView` provides several attributes.\nThese attributes can be used to customize the view's behavior, as well as its\nlook and feel. Most of these attributes have corresponding setter methods, which\ncan be used to customize the view at runtime. The `PlayerView` documentation\nlists these attributes and setter methods in more detail.\n\nFor a more comfortable user experience, consider adding the `keepScreenOn` Android\nattribute or [setting a wake lock](/reference/androidx/media3/exoplayer/ExoPlayer#setWakeMode(int)), if you are using ExoPlayer. You can\ninvestigate other actions that keep the device awake in the [background work\npages](/develop/background-work/background-tasks/awake). \n\n android:keepScreenOn=\"true\"\n\nOnce the view is declared in the layout file, it can be looked up in the\n`onCreate` method of the activity: \n\nKotlin \n\n```kotlin\noverride fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n // ...\n playerView = findViewById(R.id.player_view)\n}\n```\n\nJava \n\n```java\n@Override\nprotected void onCreate(Bundle savedInstanceState) {\n super.onCreate(savedInstanceState);\n // ...\n playerView = findViewById(R.id.player_view);\n}\n```\n\n\u003cbr /\u003e\n\nWhen a player has been initialized, it can be attached to the view by calling\n`setPlayer`: \n\nKotlin \n\n```kotlin\n// Instantiate the player.\nval player = ExoPlayer.Builder(context).build()\n// Attach player to the view.\nplayerView.player = player\n// Set the media item to be played.\nplayer.setMediaItem(mediaItem)\n// Prepare the player.\nplayer.prepare()\n```\n\nJava \n\n```java\n// Instantiate the player.\nplayer = new ExoPlayer.Builder(context).build();\n// Attach player to the view.\nplayerView.setPlayer(player);\n// Set the media item to be played.\nplayer.setMediaItem(mediaItem);\n// Prepare the player.\nplayer.prepare();\n```\n\n\u003cbr /\u003e\n\nPlayerControlView\n\n[`PlayerControlView`](/reference/androidx/media3/ui/PlayerControlView) is one of `PlayerView` sub-Views that contains the\nprogress bar and buttons to control playback. Note that `PlayerControlView` is\nnot intended to be used a standalone component outside of `PlayerView`. It can\nbe customized by setting attributes on `PlayerView` (which will be passed onto\n`PlayerControlView`) or providing a custom controller with\n`android:id=\"@id/exo_controller`.\n\nChoose a surface type\n\nThe `surface_type` attribute of `PlayerView` lets you set the type of surface\nused for video playback. The allowed values are `surface_view`, `texture_view`,\n`spherical_gl_surface_view` (which is a special value for spherical video\nplayback), `video_decoder_gl_surface_view` (which is for video rendering using\nextension renderers) and `none` (for audio playback only). More information on\nwhich surface type to pick can be found [on the Surface page](/media/media3/ui/surface)."]]