【Kotlin】AndroidアプリでYouTube動画を再生する方法をサンプルコード付きで徹底解説

Kotlinを使ってAndroidアプリケーション内でYouTube動画を再生する方法を、サンプルコード付きで段階的に紹介します。このチュートリアルでは、RecyclerViewとWebViewを組み合わせることで、複数のYouTube動画をリスト形式で一覧表示し、アプリを離れることなくそのまま再生できる仕組みを実装します。

実装の全体像

今回の構成はシンプルです。メイン画面にRecyclerViewを配置し、各リスト項目としてWebViewを含む行を生成します。そこへYouTubeのiframe埋め込みコードを読み込ませることで、動画の再生を実現します。作成・編集が必要なファイルは次の通りです。

• activity_main.xml: メイン画面のレイアウト(RecyclerViewを配置)
• MainActivity.kt: 動画データの登録とRecyclerViewへのセット
• VideoAdapter.kt: リスト項目とWebViewをバインドするアダプター
• youTubeVideos.kt: 動画URLを保持するデータクラス
• video_view.xml: 各リスト項目(WebView)のレイアウト

ステップ1: Android Studioで新規プロジェクトを作成する

まずはAndroid Studioを開き、メニューから「File」→「New Project」を選択します。プロジェクト名やパッケージ名など必要な項目を入力し、言語にKotlinを選択して新しいプロジェクトを作成してください。

ステップ2: 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="2dp"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

ステップ3: src/MainActivity.ktにコードを追加する

続いて、メインアクティビティに動画データの登録処理を書いていきます。ここでは、YouTubeのiframe埋め込みタグを文字列として5件追加しています。動画を差し替えたい場合は、embedの後ろにある動画ID(X7SiuQxhAjgなど)をお好みのものに変更してください。

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import java.util.*

class MainActivity : AppCompatActivity() {

    private lateinit var recyclerView: RecyclerView
    private var youtubeVideos = Vector<youTubeVideos>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"

        recyclerView = findViewById(R.id.recyclerView)
        recyclerView.setHasFixedSize(true)
        recyclerView.layoutManager = LinearLayoutManager(this)

        youtubeVideos.add(youTubeVideos("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
            ".youtube.com/embed/X7SiuQxhAjg\" frameborder=\"0\" allowfullscreen></iframe>"))
        youtubeVideos.add(youTubeVideos("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
            ".youtube.com/embed/KyJ71G2UxTQ\" frameborder=\"0\" allowfullscreen></iframe>"))
        youtubeVideos.add(youTubeVideos("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
            ".youtube.com/embed/y8Rr39jKFKU\" frameborder=\"0\" allowfullscreen></iframe>"))
        youtubeVideos.add(youTubeVideos("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
            ".youtube.com/embed/8Hg1tqIwIfI\" frameborder=\"0\" allowfullscreen></iframe>"))
        youtubeVideos.add(youTubeVideos("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
            ".youtube.com/embed/uhQ7mh_o_cM\" frameborder=\"0\" allowfullscreen></iframe>"))

        val videoAdapter = VideoAdapter(youtubeVideos)
        recyclerView.adapter = videoAdapter
    }
}

ステップ4: VideoAdapter.ktを作成する

次に、RecyclerViewに動画リストを描画するためのアダプタークラスを新規作成します。ポイントは、ViewHolderの初期化ブロック内でJavaScriptを有効化し、WebChromeClientを設定している点です。これによりWebView上でiframeプレーヤーが正しく動作します。

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.webkit.WebChromeClient
import android.webkit.WebView
import androidx.recyclerview.widget.RecyclerView

class VideoAdapter internal constructor(private val youtubeVideoList: List<youTubeVideos>) :
    RecyclerView.Adapter<VideoAdapter.VideoViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): VideoViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.video_view, parent, false)
        return VideoViewHolder(view)
    }

    override fun onBindViewHolder(holder: VideoViewHolder, position: Int) {
        holder.videoWeb.loadData(youtubeVideoList[position].videoUrl!!, "text/html", "utf-8")
    }

    inner class VideoViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        var videoWeb: WebView = itemView.findViewById(R.id.webView)

        init {
            videoWeb.settings.javaScriptEnabled = true
            videoWeb.webChromeClient = object : WebChromeClient() {}
        }
    }

    override fun getItemCount(): Int {
        return youtubeVideoList.size
    }
}

ステップ5: youTubeVideos.kt(データクラス)を作成する

動画のURL(iframeタグ文字列)を保持するための、ごくシンプルなデータクラスを用意します。

class youTubeVideos(var videoUrl: String?) {
}

ステップ6: レイアウトリソースvideo_view.xmlを作成する

リストの各行に対応するレイアウトファイルです。高さ180dpのWebViewを1つ配置しただけのシンプルな構造になっています。

<?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>

ステップ7: AndroidManifest.xmlにコードを追加する

最後に、インターネット通信を許可するためにINTERNET権限を宣言します。これを忘れるとWebViewが動画を読み込めず、真っ白な画面になってしまうので注意しましょう。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.q11">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

    <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端末をPCにUSB接続している前提で進めます。

Android Studioからアプリを起動するには、プロジェクト内の任意のアクティビティファイルを開き、ツールバーにあるRun(緑色の再生ボタン)アイコンをクリックします。デバイス選択のダイアログが表示されたら、接続済みのモバイル端末を選択してください。しばらく待つと端末側でアプリが起動し、YouTube動画が縦に並んだリスト画面が表示されます。あとは好きな動画をタップすれば、そのままアプリ内で再生できます。

実装時のポイントと注意点

• JavaScriptの有効化は必須: YouTubeのiframeプレーヤーはJavaScriptで動作するため、javaScriptEnabledの設定を忘れると動画が再生できません。
• loadDataWithBaseURLも検討する: 端末によってはloadDataよりも、loadDataWithBaseURL(ベースURLにhttps://www.youtube.comを指定)の方が安定して動作することがあります。
• ハードウェアアクセラレーション: 再生をスムーズにしたい場合は、applicationタグまたはactivityタグにandroid:hardwareAccelerated=trueを指定しておくと安心です。
• 動画IDの入れ替え: サンプルの動画IDを自分の配信動画やお気に入り動画のIDに置き換えるだけで、簡単にオリジナルの動画リストアプリが作れます。

このように、WebViewとRecyclerViewを組み合わせれば、特別なライブラリに依存することなく、比較的少ないコード量でアプリ内動画再生機能を実現できます。ニュースアプリや学習アプリなど、動画コンテンツを扱う場面は多いので、ぜひ自分のプロジェクトにも応用してみてください。