In this video it shows the steps to implement YouTube IFRAME API to play the YouTube videos in your Android App.
In this video uses the sample Java Script HTML code from the google developer page: https://developers.google.com/youtube/iframe_api_reference
I hope you like this video. For any questions, suggestions or appreciation please contact us at: https://programmerworld.co/contact/ or email at: programmerworld1990@gmail.com
Complete source code and other details:
package com.programmerworld.youtubeiframapi;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
public class MainActivity extends AppCompatActivity {
private String stringJavaScript = "<!DOCTYPE html>\n" +
"<html>\n" +
" <body>\n" +
" <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->\n" +
" <div id=\"player\"></div>\n" +
"\n" +
" <script>\n" +
" // 2. This code loads the IFrame Player API code asynchronously.\n" +
" var tag = document.createElement('script');\n" +
"\n" +
" tag.src = \"https://www.youtube.com/iframe_api\";\n" +
" var firstScriptTag = document.getElementsByTagName('script')[0];\n" +
" firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n" +
"\n" +
" // 3. This function creates an <iframe> (and YouTube player)\n" +
" // after the API code downloads.\n" +
" var player;\n" +
" function onYouTubeIframeAPIReady() {\n" +
" player = new YT.Player('player', {\n" +
" height: '195',\n" +
" width: '320',\n" +
" videoId: 'M7lc1UVf-VE',\n" +
" playerVars: {\n" +
" 'playsinline': 1\n" +
" },\n" +
" events: {\n" +
" 'onReady': onPlayerReady,\n" +
" 'onStateChange': onPlayerStateChange\n" +
" }\n" +
" });\n" +
" }\n" +
"\n" +
" // 4. The API will call this function when the video player is ready.\n" +
" function onPlayerReady(event) {\n" +
" event.target.playVideo();\n" +
" }\n" +
"\n" +
" // 5. The API calls this function when the player's state changes.\n" +
" // The function indicates that when playing a video (state=1),\n" +
" // the player should play for six seconds and then stop.\n" +
" var done = false;\n" +
" function onPlayerStateChange(event) {\n" +
" if (event.data == YT.PlayerState.PLAYING && !done) {\n" +
" setTimeout(stopVideo, 10000);\n" +
" done = true;\n" +
" }\n" +
" }\n" +
" function stopVideo() {\n" +
" player.stopVideo();\n" +
" }\n" +
" </script>\n" +
" </body>\n" +
"</html>";
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
}
public void buttonPlayYouTubeVideo(View view){
webView.loadData(stringJavaScript, "text/html", "utf-8");
}
}<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:allowBackup="true"
android:dataExtractionRules="@xml/data_extraction_rules"
android:fullBackupContent="@xml/backup_rules"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.YouTubeIframAPI"
tools:targetApi="31">
<activity
android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest><?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/button"
android:layout_width="239dp"
android:layout_height="83dp"
android:layout_marginStart="84dp"
android:layout_marginTop="44dp"
android:onClick="buttonPlayYouTubeVideo"
android:text="Play YouTube Video"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<WebView
android:id="@+id/webView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="33dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button" />
</androidx.constraintlayout.widget.ConstraintLayout>