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