AndroidアプリでYouTube動画を再生する方法を解説！RecyclerViewとWebViewを使った実装手順

この記事では、Androidアプリケーション内でYouTube動画を再生する方法を、実際のサンプルコードとともに段階的に解説します。RecyclerViewとWebViewを組み合わせることで、複数のYouTube動画をリスト形式で一覧表示し、そのままアプリ内で再生できる仕組みを作れます。

手順1：Android Studioで新規プロジェクトを作成する

Android Studioを起動し、「File」→「New Project」を選択して新しいプロジェクトを作成します。必要な項目をすべて入力し、プロジェクトのセットアップを完了させてください。

手順2：build.gradleに依存関係を追加する

build.gradle（Module:app）ファイルに、以下の依存関係を追加します。

implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.android.support:cardview-v7:28.0.0'

手順3：メインレイアウト（activity_main.xml）を編集する

res/layout/activity_main.xmlに、以下のコードを記述します。画面全体にRecyclerViewを配置するシンプルな構成です。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16sp"
    tools:context=".MainActivity">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>
</RelativeLayout>

手順4：動画表示用レイアウト（video_view.xml）を作成する

新しいレイアウトリソースファイル「video_view.xml」を作成し、以下のコードを追加します。ここではWebViewを使ってYouTube動画を埋め込み表示します。

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/webView"
    android:layout_width="match_parent" android:layout_height="180dp">
</WebView>

手順5：データモデルクラス（youTubeVideos.java）を作成する

youTubeVideos.javaというJavaクラスを新規作成し、以下のコードを記述します。このクラスは、動画のURL情報を保持するためのデータモデルです。

public class youTubeVideos {
    String videoUrl;
    public youTubeVideos() {
    }
    public youTubeVideos(String videoUrl) {
        this.videoUrl = videoUrl;
    }
    public String getVideoUrl() {
        return videoUrl;
    }
    public void setVideoUrl(String videoUrl) {
        this.videoUrl = videoUrl;
    }
}

手順6：アダプタークラス（VideoAdapter.java）を作成する

VideoAdapter.javaというJavaクラスを新規作成し、以下のコードを記述します。RecyclerViewのアダプターとして機能し、各リスト項目のWebViewに対して動画を読み込みます。JavaScriptを有効化しておくことがポイントです。

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import java.util.List;
public class VideoAdapter extends RecyclerView.Adapter<VideoAdapter.VideoViewHolder> {
    private List<youTubeVideos> youtubeVideoList;
    VideoAdapter(List<youTubeVideos> youtubeVideoList) {
        this.youtubeVideoList = youtubeVideoList;
    }
    @Override
    public VideoViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from( parent.getContext()).inflate(R.layout.video_view, parent, false);
        return new VideoViewHolder(view);
    }
    @Override
    public void onBindViewHolder(VideoViewHolder holder, int position) {
        holder.videoWeb.loadData( youtubeVideoList.get(position).getVideoUrl(), "text/html" , "utf-8");
    }
    @Override
    public int getItemCount() {
        return youtubeVideoList.size();
    }
    class VideoViewHolder extends RecyclerView.ViewHolder{
        WebView videoWeb;
        VideoViewHolder(View itemView) {
            super(itemView);
            videoWeb = itemView.findViewById(R.id.webView);
            videoWeb.getSettings().setJavaScriptEnabled(true);
            videoWeb.setWebChromeClient(new WebChromeClient() {
            } );
        }
    }
}

手順7：MainActivity.javaを実装する

src/MainActivity.javaに、以下のコードを追加します。ここではVectorにYouTube動画のiframeタグを格納し、アダプターを通じてRecyclerViewに渡しています。動画IDの部分を書き換えれば、好きな動画を表示できます。

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import java.util.Vector;
public class MainActivity extends AppCompatActivity {
    RecyclerView recyclerView;
    Vector<youTubeVideos> youtubeVideos = new Vector<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = findViewById(R.id.recyclerView);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager( new LinearLayoutManager(this));
        youtubeVideos.add( new youTubeVideos("<iframe width=\"100%\" height=\"100%\" src=\"https://www" + ".youtube.com/embed/eWEF1Zrmdow\" frameborder=\"0\" allowfullscreen></iframe>") );
        youtubeVideos.add( new youTubeVideos("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +".youtube.com/embed/KyJ71G2UxTQ\" frameborder=\"0\" allowfullscreen></iframe>") );
        youtubeVideos.add( new youTubeVideos("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +".youtube.com/embed/y8Rr39jKFKU\" frameborder=\"0\" allowfullscreen></iframe>") );
        youtubeVideos.add( new youTubeVideos("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +".youtube.com/embed/8Hg1tqIwIfI\" frameborder=\"0\" allowfullscreen></iframe>") );
        youtubeVideos.add( new youTubeVideos("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +".youtube.com/embed/uhQ7mh_o_cM\" frameborder=\"0\" allowfullscreen></iframe>") );
        VideoAdapter videoAdapter = new VideoAdapter(youtubeVideos);
        recyclerView.setAdapter(videoAdapter);
    }
}

手順8：AndroidManifest.xmlを編集する

androidManifest.xmlに、以下のコードを追加します。YouTube動画の再生にはインターネット通信が必須となるため、INTERNETなどのパーミッション宣言を忘れずに行ってください。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <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/AppTheme">
        <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スマートフォンがパソコンに接続されていることを前提としています。Android Studioからアプリを実行するには、プロジェクト内のアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックします。ドロップダウンから自分のモバイル端末を選択すると、端末に以下のような初期画面が表示されます。

補足：実装時の注意点

かつて提供されていた公式の「YouTube Android Player API」は現在非推奨となっているため、本記事のようにWebViewでiframeを埋め込む手法が広く利用されています。また、本サンプルで使用しているsupportライブラリは旧式のものであるため、新規プロジェクトで開発する場合はAndroidX（RecyclerViewやViewPager2など）への置き換えを検討するとよいでしょう。さらに、動画を連続して読み込むとメモリを消費しやすいため、リストが長くなる場合はRecyclerViewのonViewRecycled()などでWebViewを適切に解放する工夫もおすすめです。