ホーム > プログラミング > Android動画再生アプリを作る ( ExoPlayer + PlayerView ) > 02.再生位置の表示と変更をできるようにする

02.再生位置の表示と変更をできるようにする



再生位置の表示、変更をできるようにします。

解説

前項「01.動画を再生する」で作成したアプリでも、「PlayerViewに標準で設定された再生コントローラー」が表示され、再生位置の表示と変更は可能でした。
本項では、「PlayerViewに標準で設定された再生コントローラー」ではなく、「カスタムの再生コントローラー」を表示し、再生位置の表示と変更をできるようにします。

UI要素のid名を、ExoPlayerライブラリで定められたid名にすることで、「見た目は自前で作成する。機能はExoPlayerライブラリ内で作成された処理を利用する」ことができます。

本項で実施している内容は、以下です。

実装

プロジェクトを開く

01.動画を再生する」で作成したプロジェクトを開きます。

カスタムコントロールのレイアウトの作成

カスタムコントローラーのレイアウトを作成します。

「Project」ペインの「app > res > layout」を右クリックします。
右クリックメニュー「New > Layout Resource File」を選択します。


「File name」に「custom_controller」と入力します。
「Root element」に「RelativeLayout」と入力します。
「OK」ボタンを押します。

custom_controller.xml が作成されます。

「Project」ペインの「app > res > layout > custom_controller.xml」を開きます。

「Code」タブをクリックし、コードビューに変更します。

custom_controller.xml に以下の変更を行います。

custom_controller.xml 全体としては、以下のようにします。

メインアクティビティのレイアウトの編集

メインアクティビティのレイアウトの動画表示用ビューに、カスタムコントロールを紐づけます。

「Project」ペインの「app > res > layout > activity_main.xml」を開きます。

「exoplayer2.ui.PlayerView」定義に、以下を追加します。

activity_main.xml 全体としては、以下のようにします。

実行

Android端末にて、動作確認。

アプリを起動すると、動画が再生、表示されます。

画面下部に、「PlayerViewに標準で設定された再生コントローラー」ではなく、「カスタムの再生コントローラー」が表示されます。


つまみを移動すると、再生位置が変わります。


再生位置テキスト、再生位置バーは、しばらく放っておくと非表示となり、画面をタップすると再表示されます。

ダウンロード

サンプルコード

関連ページ

前項目:01.動画を再生する

次項目:03.一時停止、再開、10秒スキップをできるようにする


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.