In this video it shows the steps to build your own Android App in which you can run the YouTube video in background in picture-in-picture (PIP) mode. This will enable the user to do other tasks in the phone while listening to the YouTube video in parallel.
In this demo, it refers to the code from the below two pages published by us earlier:
https://programmerworld.co/android/how-to-use-youtube-iframe-javascript-api-to-play-yt-videos-embedded-in-your-android-app/
https://programmerworld.co/android/how-to-implement-picture-in-picture-mode-for-your-android-app/
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.youtubevideosinpipmode;
import androidx.appcompat.app.AppCompatActivity;
import android.app.PictureInPictureParams;
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, 100000);\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);
setPictureInPictureParams(new PictureInPictureParams.Builder()
.setAutoEnterEnabled(true)
.build());
}
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.YouTubeVideosInPIPMode"
tools:targetApi="31">
<activity
android:name=".MainActivity"
android:exported="true"
android:supportsPictureInPicture="true"
android:configChanges=
"screenSize|smallestScreenSize|screenLayout|orientation">
<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">
<WebView
android:id="@+id/webView"
android:layout_width="249dp"
android:layout_height="218dp"
android:layout_marginStart="1dp"
android:layout_marginTop="1dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="86dp"
android:layout_marginTop="33dp"
android:onClick="buttonPlayYouTubeVideo"
android:text="Play"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/webView" />
</androidx.constraintlayout.widget.ConstraintLayout>Sreenshots:
