วิธีเล่นวิดีโอ YouTube ในแอป Android ด้วย Kotlin

ภาพรวม

ตัวอย่างนี้สาธิตวิธีการฝังและเล่นวิดีโอ YouTube ในแอปพลิเคชัน Android โดยใช้ RecyclerView และ WebView ด้วย Kotlin

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

เปิด Android Studio สร้างโปรเจกต์ใหม่ตามปกติ

ขั้นตอนที่ 2: จัดรูปแบบหน้าจอหลัก (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: เขียนโค้ด MainActivity.kt

สร้างรายการวิดีโอ YouTube ด้วย iframe embed URL:

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 val youtubeVideos = mutableListOf<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)

        // เพิ่มวิดีโอ YouTube (ตัวอย่าง 5 วิดีโอ)
        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 ใช้ 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(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 = WebChromeClient()
        }
    }

    override fun getItemCount(): Int = youtubeVideoList.size
}

ขั้นตอนที่ 5: สร้างคลาสโมเดล YouTubeVideos.kt

class YouTubeVideos(var videoUrl: String?)

ขั้นตอนที่ 6: สร้างเลย์เอาต์ video_view.xml

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

เพิ่มสิทธิ์อินเทอร์เน็ต:

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

ทดสอบการทำงาน

รันแอปบนอุปกรณ์จริง จะแสดงรายการวิดีโอ YouTube ที่สามารถเล่นได้โดยตรงในแอป