02．動画の縦横比を補正する

01．で作成したアプリの動画は、縦もしくは横に引き伸ばされて表示されることがあります。
動画の縦横比が正しく表示されるようにします。

解説

前項「01．動画を再生する」で作成したアプリでは、動画は、画面いっぱいに引き伸ばされて表示されます。
動画の縦横比と画面の縦横比が異なる場合、動画は、縦もしくは横に長く表示されます。

動画の縦横比を保持しつつ、表示領域の中で最大限引きのばした、幅と高さで動画を表示する処理を実装します。

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

動画を表示するビューの設定について、「親要素のサイズと一致するサイズ」から「コンテンツに適合するサイズ」に変更します。
動画を表示するビューについて、「動画の縦横比を保持しつつ、表示領域の中で最大限引きのばした、幅と高さに設定する」関数を追加します。
動画の再生が始まるときに、追加した「動画の縦横比を保持しつつ、表示領域の中で最大限引きのばした、幅と高さに設定する」関数を呼び出すようにします。

実装

プロジェクトを開く

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

レイアウトの編集

動画を表示するビューの設定について以下の変更を加えます。

サイズの設定を、「親要素のサイズと一致するサイズ」から「コンテンツに適合するサイズ」に変更します。
「親要素に対して中央に配置」の設定を追加します。

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

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="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true"/> </RelativeLayout>

メインアクティビティクラスの編集（動画を再生するビューのサイズの調整の関数定義）

メインアクティビティクラスに動画を再生するビューのサイズの調整の関数の定義を追加します。
動画を再生するビューのサイズの調整の処理は以下です。

動画のサイズの取得
動画を再生するビューの親のサイズの取得
動画の縦横比を保持しつつ、動画を再生するビューの親の中で最大限引きのばした、幅と高さを求める
求めた幅と高さを、動画を再生するビューに設定

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

メインアクティビティクラスの末尾に、以下を追加します。
// 動画を再生するビューのサイズの調整 private void adjustVideoViewSize() { // 動画があるかの確認 Format videoformat = m_simpleexoplayer.getVideoFormat(); if( null == videoformat ) { return; } // 動画のサイズ int iVideoWidth = videoformat.width; int iVideoHeight = videoformat.height; // 動画を再生するビューの親のサイズ ViewGroup viewgroupVideo = (ViewGroup)m_surfaceviewVideo.getParent(); int iViewgroupWidth = viewgroupVideo.getWidth(); int iViewgroupHeight = viewgroupVideo.getHeight(); // 動画の縦横比を保持しつつ、動画を再生するビューの親の中で最大限引きのばした、幅と高さを求める ViewGroup.LayoutParams layoutparams = m_surfaceviewVideo.getLayoutParams(); double dVideoRatio = (float)iVideoWidth / iVideoHeight; double dViewgropuRatio = (float)iViewgroupWidth / iViewgroupHeight; if( dVideoRatio > dViewgropuRatio ) { layoutparams.width = iViewgroupWidth; layoutparams.height = (int)( (double)layoutparams.width / dVideoRatio ); } else { layoutparams.height = iViewgroupHeight; layoutparams.width = (int)( (double)layoutparams.height * dVideoRatio ); } // 求めた幅と高さを、動画を再生するビューに設定 m_surfaceviewVideo.setLayoutParams( layoutparams ); }

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

メインアクティビティクラスの編集（動画を再生するビューのサイズの調整の関数呼び出し）

動画を再生するビューのサイズの調整の関数の呼び出しの処理を追加します。

メインアクティビティクラスに、以下のコードを追加します。

メンバー変数に、Playerリスナーの定義
onCreate関数にて、SimpleExoPlayerオブジェクトに、定義したPlayerリスナーを追加する処理

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

メインアクティビティクラス全体としては、以下のようにします。
public class MainActivity extends AppCompatActivity { （・・・略・・・） private final Player.Listener m_playerlistener = new Player.Listener() { @Override public void onIsPlayingChanged( boolean isPlaying ) { if( isPlaying ) { // 動画を再生するビューのサイズの調整 adjustVideoViewSize(); } } }; @Override protected void onCreate( Bundle savedInstanceState ) { super.onCreate( savedInstanceState ); setContentView( R.layout.activity_main ); // 動画を再生するビューの取得 m_surfaceviewVideo = findViewById( R.id.surfaceview ); // SimpleExoPlayerの作成と設定 SimpleExoPlayer.Builder playerbuilder = new SimpleExoPlayer.Builder( this ); m_simpleexoplayer = playerbuilder.build(); m_simpleexoplayer.addListener( m_playerlistener ); // 動画を再生するビューとSimpleExoPlayerの紐づけ（・・・略・・・）

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

実行

Android端末にて、動作確認。

アプリを起動すると、動画が再生、表示されます。
動画の縦横比は保持されつつ、表示領域の中で最大限引きのばした、幅と高さで、動画が表示されます。

ダウンロード

サンプルコード