Android の VideoView でネットワーク上にある動画のサムネイルを表示してみた件

概要

Android で VideoView を使用するとネットワーク上にある動画ファイルをストリーミング再生することができるのですが、再生前に動画のサムネイルを表示してくれる機能が無いようなので、邪道の極みかも知れませんが FFmpegMediaMetadataRetriever（動画のサムネイル画像を取得してくれるライブラリ）を使用せずに０秒目のサムネイルを表示する方法を考えてみました。

ソースコード

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="jp.co.sample.package">

    <uses-permission android:name="android.permission.INTERNET" />
    <!-- インターネットパーミッションを設定しないと VideoView でネットワーク上の動画ファイルを再生できないので注意 -->

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <VideoView
        android:id="@+id/videoView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_media_play" />
    <!-- 「再生」or「一時停止」ボタン -->
</LinearLayout>

MainActivity.java

package jp.co.sample.package;

import android.media.MediaPlayer;
import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageButton;
import android.widget.VideoView;

public class MainActivity extends AppCompatActivity {

    private VideoView videoView;
    private ImageButton videoControlImageButton;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        videoView = (VideoView) findViewById(R.id.videoView);
        videoView.setVideoURI(Uri.parse("https://s3-us-west-2.amazonaws.com/avnohellodev/videos/9e867aba83197862e7500ebe3ebfd68a.mp4"));
        videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
            @Override
            public void onPrepared(MediaPlayer mp) {
                // 動画を再生できる状態になったとき
                showVideoThumbnail(mp);
                changePlayButton();
            }
        });

        videoView.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
            @Override
            public void onCompletion(MediaPlayer mp) {
                // 動画を最後まで再生したとき
                showVideoThumbnail(mp);
                changePlayButton();
            }
        });

        // 「再生」or「一時停止」ボタン
        videoControlImageButton = (ImageButton) findViewById(R.id.button);
        videoControlImageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (videoView.isPlaying()) {
                    // 動画を一時停止する
                    videoView.pause();
                    changePlayButton();
                } else {
                    // 動画を再生する
                    videoView.start();
                    changePauseButton();
                }
            }
        });
    }

    /**
     * 動画のサムネイルを表示します
     *
     * @param mediaPlayer
     */
    private void showVideoThumbnail(MediaPlayer mediaPlayer) {
        mediaPlayer.start();
        mediaPlayer.pause();
        mediaPlayer.seekTo(0);
    }

    /**
     * 「再生」ボタンに変更する
     */
    private void changePlayButton() {
        videoControlImageButton.setImageResource(android.R.drawable.ic_media_play);
    }

    /**
     * 「一時停止」ボタンに変更する
     */
    private void changePauseButton() {
        videoControlImageButton.setImageResource(android.R.drawable.ic_media_pause);
    }
}

実行結果

再生 → 一時停止 → 0秒目にセット してサムネイルを表示していますが、その処理の間に動画の音声が漏れることはありませんでした。
また Android バージョン 4.0.4, 4.1.2, 4.2.2, 5.0.2, 6.0.1 の端末でもサムネイル表示されることが確認できました。

mediaPlayer.start();
mediaPlayer.pause();
mediaPlayer.seekTo(0);

(↑) 上記の処理順は結構重要です。処理の順番を入れ替えると Android のバージョンによっては正常にサムネイルが表示されない場合があります。
褒められたやり方ではないかも知れないので、よい子はマネしないでね。

所感

本当はサーバー側でサムネイルを準備してもらうのが正しい行いのような気がします。