01．動画を再生する

プロジェクトの作成を行います。
動画を再生する処理を作成します。

解説

ExoPlayerで、動画を再生するためにすべきことは、以下です。

• ExoPlayer を使うために、ビルド依存関係の設定に、ExoPlayer に関する記述を追加します。
• 動画を表示するビューを、画面に追加します。
• ExoPlayerオブジェクトを作成し、動画再生を開始します。

ExoPlayerオブジェクトの作成から、動画再生の開始までの、必要な処理は、以下です。

1. 動画を再生するビューの取得
2. 動画を再生するビューの取得
3. SimpleExoPlayerの作成と設定
4. 動画を再生するビューとSimpleExoPlayerを紐づけ
5. MediaItemを作成し、SimpleExoPlayerへセット
6. 再生の準備
7. 再生の開始

上記以外に、本項で実施していることは、以下です。

• インターネット通信を行うため、パーミッションの設定に、インターネット通信に関する記述を追加します。

再生動画として、commondatastorage.googleapis.com の gtv-videos-bucket の sample に置いてある「Big Buck Bunny」動画ファイルを使用しました。
(https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4)

Big Buck Bunny
Copyright (C) 2008 Blender Foundation | peach.blender.org Some Rights Reserved.
Creative Commons Attribution 3.0 license. https://peach.blender.org/

実装

プロジェクトの作成

（開発環境としては、Android Studio 4.2.2 を使用しています）

（この設定でプロジェクトを作成しなければいけない、というわけではありません。）

「Welcome to Android Studio」画面の「Create New Project」をクリックします。


「Empty Activity」を選択し、「Next」ボタンを押します。


Nameに、「MyExoPlayerWithSurfaceView」と入力します。
Package nameのドメイン部分に、会社のドメイン名を指定します。
Save locationに、プロジェクトを保存するフォルダパスを指定します。
Minimum SDKを選択します（たとえば、「API 23: Android 6.0 (Marshmallow)」）。
「Finish」ボタンを押します。

しばらく待ちます。
Android Studio のステータスバーに「Gradle sync finished in ・・・」や「*daemon started successfully ・・・」と出るまで待ちます。

以上で、プロジェクトができました。

ビルド依存関係の設定

ExoPlayer を使うために、ビルド依存関係の設定に、ExoPlayer に関する記述を追加します。

「Project」ペインの「Gradle Scripts > build.gradle (Module: ・・・.app)」を開きます。

「dependencies」部に、以下の記述を追加します。
implementation 'com.google.android.exoplayer:exoplayer:2.15.0'
（ExoPlayerのバージョン番号の部分は、ExoPlayerのリリースのリリースノートを確認し、所望のバージョン番号を記載します。
　上記で指定している「2.15.0」は、2021年8月29日時点での最新リリースバージョン番号です。）

build.gradle (Module: ・・・.app) 全体としては、以下のようにします。
plugins { id 'com.android.application' } android { compileSdkVersion 30 defaultConfig { applicationId "com.hiramine.myexoplayerwithsurfaceview" minSdkVersion 23 targetSdkVersion 30 versionCode 1 versionName "1.0" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' } } compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } } dependencies { implementation 'androidx.appcompat:appcompat:1.3.1' implementation 'com.google.android.material:material:1.4.0' implementation 'androidx.constraintlayout:constraintlayout:2.1.0' testImplementation 'junit:junit:4.+' androidTestImplementation 'androidx.test.ext:junit:1.1.3' androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0' implementation 'com.google.android.exoplayer:exoplayer:2.15.0' }

編集ウィンドウ右上の「Sync Now」をクリックし、変更を適用します。

レイアウトの編集

動画を表示するビューを、画面に追加します。

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

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

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

• ルートレイアウトを「RelativeLayout」に変更します。
• 「TextView」定義を削除します。
• 「SurfaceView」定義を追加します。

activity_main.xml 全体としては、以下のようにします。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <SurfaceView android:id="@+id/surfaceview" android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout>

メインアクティビティクラスの編集（動画再生）

動画を再生するために、メインアクティビティクラスの onCreate 関数に、以下の処理を追加します。

1. 動画を再生するビューの取得
2. 動画を再生するビューの取得
3. SimpleExoPlayerの作成と設定
4. 動画を再生するビューとSimpleExoPlayerを紐づけ
5. MediaItemを作成し、SimpleExoPlayerへセット
6. 再生の準備
7. 再生の開始

メインアクティビティクラスのメンバー変数として、以下を追加します。

• 再生する動画のURL
• SurfaceViewオブジェクト
• SimpleExoPlayerオブジェクト

「Project」ペインの「app > java > ドメイン.アプリ名 > MainActivity」を開きます。

メインアクティビティクラス全体としては、以下のようにします。
public class MainActivity extends AppCompatActivity { private final String m_strUri = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"; // 再生動画として、commondatastorage.googleapis.com の gtv-videos-bucket の sample に置いてある「Big Buck Bunny」動画ファイルを使用。 // Big Buck Bunny // 　Copyright (C) 2008 Blender Foundation | peach.blender.org Some Rights Reserved. // 　Creative Commons Attribution 3.0 license. https://peach.blender.org/ private SurfaceView m_surfaceview; private SimpleExoPlayer m_simpleexoplayer; @Override protected void onCreate( Bundle savedInstanceState ) { super.onCreate( savedInstanceState ); setContentView( R.layout.activity_main ); // 動画を再生するビューの取得 m_surfaceview = findViewById( R.id.surfaceview ); // SimpleExoPlayerの作成と設定 SimpleExoPlayer.Builder playerbuilder = new SimpleExoPlayer.Builder( this ); m_simpleexoplayer = playerbuilder.build(); // 動画を再生するビューとSimpleExoPlayerの紐づけ m_simpleexoplayer.setVideoSurfaceView( m_surfaceview ); // MediaItemの作成とSimpleExoPlayerへのセット Uri uriVideo = Uri.parse( m_strUri ); m_simpleexoplayer.setMediaItem( MediaItem.fromUri( uriVideo ) ); // 再生の準備 m_simpleexoplayer.prepare(); // 再生の開始 m_simpleexoplayer.play(); } }

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

メインアクティビティクラスの編集（別アプリ移行時に動画一時停止）

「別アプリをフォアグラウンドにした時には、再生を一時停止し、本アプリに復帰した時に、再生を再開する」ために、以下を行います。

1. 「初回表示時、および、ポーズからの復帰時」に呼ばれる関数である onResume 関数を追加します。「Activity pause時に再生中なら、再生再開する」処理を記述します。
2. 「アクティビティがフォアグラウンドからバックグラウンドに追いやられた時」に呼ばれる関数である onPause 関数を追加します。「動画再生中かどうかの取得と保持」処理、「動画再生の一時停止」処理を記述します。

メインアクティビティクラスのメンバー変数として、以下を追加します。

• アクティビティがポーズとなったときに動画再生中だったかのフラグ

「Project」ペインの「app > java > ドメイン.アプリ名 > MainActivity」を開きます。

メインアクティビティクラス全体としては、以下のようにします。
public class MainActivity extends AppCompatActivity { private final String m_strUri = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"; // 再生動画として、commondatastorage.googleapis.com の gtv-videos-bucket の sample に置いてある「Big Buck Bunny」動画ファイルを使用。 // Big Buck Bunny // 　Copyright (C) 2008 Blender Foundation | peach.blender.org Some Rights Reserved. // 　Creative Commons Attribution 3.0 license. https://peach.blender.org/ private SurfaceView m_surfaceview; private SimpleExoPlayer m_simpleexoplayer; private boolean m_bIsPlayingWhenActivityIsPaused; @Override protected void onCreate( Bundle savedInstanceState ) { super.onCreate( savedInstanceState ); setContentView( R.layout.activity_main ); // 動画を再生するビューの取得 m_surfaceview = findViewById( R.id.surfaceview ); // SimpleExoPlayerの作成と設定 SimpleExoPlayer.Builder playerbuilder = new SimpleExoPlayer.Builder( this ); m_simpleexoplayer = playerbuilder.build(); // 動画を再生するビューとSimpleExoPlayerの紐づけ m_simpleexoplayer.setVideoSurfaceView( m_surfaceview ); // MediaItemの作成とSimpleExoPlayerへのセット Uri uriVideo = Uri.parse( m_strUri ); m_simpleexoplayer.setMediaItem( MediaItem.fromUri( uriVideo ) ); // 再生の準備 m_simpleexoplayer.prepare(); // 再生の開始 m_simpleexoplayer.play(); } // 初回表示時、および、ポーズからの復帰時 @Override protected void onResume() { super.onResume(); if( m_bIsPlayingWhenActivityIsPaused ) { // Activity pause時に動画再生中なら、動画再生再開 m_simpleexoplayer.play(); } } // アクティビティがフォアグラウンドからバックグラウンドに追いやられた時 @Override protected void onPause() { // 動画再生中かどうかの取得と保持 m_bIsPlayingWhenActivityIsPaused = m_simpleexoplayer.isPlaying(); // 動画再生の一時停止 m_simpleexoplayer.pause(); super.onPause(); } }

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

パーミッションの設定

インターネット通信を行うため、パーミッションの設定に、インターネット通信に関する記述を追加します。

「Project」ペインの「app > manifests > AndroidManifest.xml」を開きます。

「manifest」部に、以下の記述を追加します。
<!-- ネットワーク ソケットを開くことをアプリに許可する --> <uses-permission android:name="android.permission.INTERNET"/>

「AndroidManifest.xml」全体としては、以下のようにします。
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.hiramine.myexoplayerwithsurfaceview"> <!-- ネットワーク ソケットを開くことをアプリに許可する --> <uses-permission android:name="android.permission.INTERNET"/> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/Theme.MyExoPlayerWithSurfaceView"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>

実行

Android端末にて、動作確認。

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


動画は、画面いっぱいに引き伸ばされて表示されます。
（動画の縦横比と画面の縦横比が異なる場合、動画は、縦もしくは横に長く表示されます。）

別アプリをフォアグラウンドにした時には、再生は一時停止します。本アプリに復帰すると、再生は再開します。

ダウンロード

サンプルコード

関連ページ

次項目：02．動画の縦横比を補正する