How to Play Youtube videos without YoutubeApi in Android Studio using Kotlin.

Last updated Dec 26, 2021


In this android example tutorials we will see how to Play Youtube Videos in Android Studio using Kotlin language without youtube api

What is Webview?
Android WebView is a view component that shows the application's web pages. The web pages are displayed using the WebKit engine.
WebView's loadUrl() and loadData() functions are used to load and show web pages.
 
Implementation:

Step 1: 
Create a new Project in android studio.

Go to File > New > New Project > Empty Activity > Next > Enter Name > Select Language Kotlin > Finish


Step 2: Open activity_main.xml file and add the recyclerview Widget.

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

 

RecyclerView is a more flexible and adaptable variant of ListView and GridView. It is a container for presenting a huge number of data sets that may be scrolled very efficiently by keeping a restricted number of views.

Step3: Create a new xml file 

app > res > layout > right-click > new > layout resource file > Enter file name (video_view) > Ok.

 

Step 4: Open video_view.xml file and add the following code.

<?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="250dp"
    android:padding="10dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:textSize="19sp"
        android:textStyle="bold"
        android:textColor="#FFCC8B2B"
        android:text="Video1">
    </TextView>
    <WebView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:id="@+id/webView"></WebView>
</LinearLayout>


Step 5: Create a new Kotlin file (VideoModel) and add the following code

class VideoModel(var videoUrl: String?, var title: String?) {
}

 

Step 6: Create a adapter kotlin class (VideoAdapter) and add the following kotlin code

class VideoAdapter internal constructor(private val videoList: List) :
    RecyclerView.Adapter() {
    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(videoList[position].videoUrl!!, "text/html", "utf-8")
        holder.text.setText(videoList[position].title)
    }
    inner class VideoViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        var videoWeb: WebView = itemView.findViewById(R.id.webView)
        var text: TextView = itemView.findViewById(R.id.textview)
        init {
            videoWeb.settings.javaScriptEnabled = true
            videoWeb.webChromeClient = object : WebChromeClient() {
            }
        }
    }
    override fun getItemCount(): Int {
        return videoList.size
    }
}

 

Using JavaScript in Webview
If the web page you intend to load in your WebView makes use of JavaScript, you must enable JavaScript in your WebView. You can also construct interfaces between your app code and your JavaScript code once JavaScript is enabled.

For enabling the javascript settings by using

videoWeb.settings.javaScriptEnabled = true

 

Step 7: Go to MainActivity.kt file 

Initialize the recylerview instance

 private lateinit var recyclerView:RecyclerView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        recyclerView = findViewById(R.id.recyclerView)

 

Add data in videoList

videosList.add(VideoModel("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
                ".youtube.com/embed/m6TWA16Rh3U\" frameborder=\"0\" allowfullscreen></iframe>","Image Opacity"))
        videosList.add(VideoModel("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
                ".youtube.com/embed/uF3i9_fzepo\" frameborder=\"0\" allowfullscreen></iframe>","Send SMS"))
        videosList.add(VideoModel("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
                ".youtube.com/embed/mRnFFTgGGTY\" frameborder=\"0\" allowfullscreen></iframe>","RecyclerView Android"))
        videosList.add(VideoModel("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
                ".youtube.com/embed/PMIHDMY1bWo\" frameborder=\"0\" allowfullscreen></iframe>", "Webview Android"))

 

Set list data in adapter and set adapter in recyclerView

val videoAdapter = VideoAdapter(videosList)
recyclerView.adapter = videoAdapter

 

Step 8: Final step, go to AndroidManifest.xml file and add the following permissions.

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


Step 9: Now run the app in your emulator or real device, you will get the given output

OUTPUT:

Youtube Video Player

 

 

Youtube Video Player

 


Complete Source Code of Youtube Video Player Example:

activity_main.xml file

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

 

MainActivity.kt file

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 videosList = Vector()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        recyclerView = findViewById(R.id.recyclerView)
        title = "Youtube Video Player"
        recyclerView.setHasFixedSize(true)
        recyclerView.layoutManager = LinearLayoutManager(this)
       videosList.add(VideoModel("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
                ".youtube.com/embed/m6TWA16Rh3U\" frameborder=\"0\" allowfullscreen></iframe>","Image Opacity"))
        videosList.add(VideoModel("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
                ".youtube.com/embed/uF3i9_fzepo\" frameborder=\"0\" allowfullscreen></iframe>","Send SMS"))
        videosList.add(VideoModel("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
                ".youtube.com/embed/mRnFFTgGGTY\" frameborder=\"0\" allowfullscreen></iframe>","RecyclerView Android"))
        videosList.add(VideoModel("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
                ".youtube.com/embed/PMIHDMY1bWo\" frameborder=\"0\" allowfullscreen></iframe>", "Webview Android"))
        val videoAdapter = VideoAdapter(videosList)
        recyclerView.adapter = videoAdapter
    }
}

 

video_view.xml file

<?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="250dp"
    android:padding="10dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:textSize="19sp"
        android:textStyle="bold"
        android:textColor="#FFCC8B2B"
        android:text="Video1">
    </TextView>
    <WebView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:id="@+id/webView"></WebView>
</LinearLayout>

 

VideoModel.kt file

class VideoModel(var videoUrl: String?, var title: String?) {
}

 

VideoAdapter.kt file

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

class VideoAdapter internal constructor(private val videoList: List) :
    RecyclerView.Adapter() {
    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(videoList[position].videoUrl!!, "text/html", "utf-8")
        holder.text.setText(videoList[position].title)
    }
    inner class VideoViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        var videoWeb: WebView = itemView.findViewById(R.id.webView)
        var text: TextView = itemView.findViewById(R.id.textview)
        init {
            videoWeb.settings.javaScriptEnabled = true
            videoWeb.webChromeClient = object : WebChromeClient() {
            }
        }
    }
    override fun getItemCount(): Int {
        return videoList.size
    }
}

 

 

Conclusion: In this example we have covered how to play youtube videos using webview in Android Studio using Kotlin Language without youtube api.


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

403 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions