How to play YouTube videos in an Android WebView with just a few lines of code

Tram Ho

Introduction

Youtube has an official Player API for Android, to play videos in a native player (originally). But these APIs have some limitations (will be discussed below). The best way to solve the problems around these limits is to play Youtube videos in a WebView. By using a WebView you will have a simple view that can be added anywhere in your application. It will be easier to use a native API and you don’t have to deal with bugs and issues.

But you can’t just download a page from Youtube in your WebView, so your application will only look like a web browser with a poor user experience. The best way to play Youtube Videos on the web is to use the IFrame Player API from Youtube. This is a JavaScript API that provides access to a web-based Youtube player.

To use it in your application, you need to write a web page and then upload that page to a WebView. But now you have a few other extended tasks to do, how to interact with WebPage in your Android code? The way to do this is to write a JavaScript Interface , which is integrated into the WebView and creates a bridge between the Android world (Kotlin / Java) and the Web world (Java Script). There is a lot to do if you just need to play a Youtube Video. I had to do all of that at the same time in my application, and to avoid wasting time for others, I decided to release its source code as an open source library. This library is called android-youtube-player , it is an API to play Youtube Videos in an Android WebView, with a way to feel natural and take the least effort for developers. You do not have to write any web pages or JavaScript at all.

 

I. Why should you consider not using the official library from YouTube?

You are building a new Android application and you need to allow your users to watch Youtube Videos in it. The first thing you can think of is to use the official YouTube Android Android Player API. This is not necessarily the best choice.

1. If you worry about stability

So far (December 25, 2017) the official YouTube Player API for Android isn’t great. You will feel fine if you need to use YoutubeBaseActivity / YoutubeStandalonPlayer, but you will experience a lot of trouble when using YoutubePlayerFragment. This library has a few bugs that have been around for a long time. Here is a significant number of bugs. During the process of developing my application, I went through development on that library and saw my application crash unexpectedly for unknown reasons. It makes my application unstable and never ready for production. The bugs still exist there as I know. A newer version of the library should be created, but it hasn’t been released yet.

2. If you do not want to be easily tied by Google Play and Youtube apps

In order to run, the official YouTube Player API requires the user’s device to have Google Play and Youtube applications installed simultaneously. This is a limitation that is not required by android-youtube-player APsI .

3. If you want more control over what Android Youtube Player has to offer (UI + behavior)

The official YouTube Player API from Google is not open source so you cannot customize it much more than what APIs offers. Unfortunately this means: not really that much. You may need to change the UI for the Player or write some custom behaviors specific to your use cases. That is not possible with the official Youtube Player APIs.

4. You do not want to register your application in the Google Developers Console

… It’s a bit lazy, but the android-youtube-player API doesn’t require you to do that. Among all this, the biggest concern I have is the stability of the library. Perhaps Google will someday release a new version, which solves all issues, but for now it hasn’t happened (Since 2013). If like me, you need to publish your app, you probably need more immediate solutions.

II. The alternative: android-youtube-player API

android-youtube-player APIs provide a simple View which can be easily integrated into any Activity and Fragment. Located at the bottom of this library interacts with Youtube through the IFrame Player API , which is run inside a WebView. If you want to use the web player’s Web UIs, you can do it. But you can also use a customizable native UI provided by the library. You can even build apps that need to customize the UI from the start for yourself. Because the API uses the official IFrame Player API to access YouTube, there are no issues about violating service usage policies. Here are some advantages that the library has over the official YouTube Player APIs library of Google and others:

1. Easy to use

android-youtube-player does not require its users to inherit any Activities or Fragments, it is just a View. You can throw it wherever you want.

2. Ability to customize UIs

android-youtube-player gives you a lot of freedom in the context of the UIs customization process. If you need, you can completely replace the UI for your player . Or you can easily add or remove Views from the default UIs.

3. Support Chrome Cast

Starting with version 8, android-youtube-player APIs can also be used to throw (cast) videos from an Android application to a Google Case device .

III. How to play YouTube videos

Here I will show a simple example of how to get and use the library with just a few lines of code.

The source code and a few other examples are available here , in the sample apps. You can also download the sample application apk and try running it on your phone.

1. The first steps

To use APIs start by adding libraries to your dependency, by adding these lines to the build.gradle at the module level in your application. (Instead of ” last_version with the actual final version of the library, the released versions can be found here. )

To start using the player you need to add a YoutubePlayerView for your layout. You can also create it the way you want to program it.

In Activity / Fragment, get a reference to YoutubePlayerView in your source code and add it as an object to listen for Lifecycle events from its parent.

You need to be using Androidx instead of old support libraries, so you may encounter compatibility issues at this stage.

This is all you need to start playing Youtube videos in your app.

If you need more control, everything you can do is show a reference to your YoutubePlayerView and add a YoutubePlayerListener to it.

There is no easy way to play Youtube Videos on Android. 😢

2. Next steps

  1. Go to the project’s home page .
  2. Read the Document APIs .
  3. Leave a star on Github . 😄

IV. How to customize the UI of an Android YouTube Player

1. inflateCustomPlayerUI

From the limitations of the Google Android Youtube Player APIs mentioned earlier, we can see that it is very difficult to change the UI / Behaviors of the Player provided. What you need is to redesign Youtube Player to better view and interact with your application. Starting with Version 5.0.0 of the Android Youtube Player APIs library, we can completely replace the UI for our Player. This is easily done using the new method of YoutuberPlayerView .

This method takes an ID of a resource layout and returns a Views object corresponding to the layout that was built. The player’s default UI will be removed and replaced with the new UI.

This method gives you all the freedom you need. The resource layout you pass into the method may be exactly what you need.

You will be in charge of and update the status for your UI, such as switching the play / pause status icons (If you have one), updating the progress on the seek bar (If you have one), .. ..

 

2. Simple example

This section will be a simple example demonstrating how to use this method. This example is very simple, it is just handling behavior for play / pause button.

We can now call the inflateCustomPlayerUI method to use this layout for our Player UI.

This feature returns a reference to the inflated layout.

Now the new UI is ready, but we don’t know how to interact with it when users click on it. In our example: What happens when a user clicks the button? The player should stop or play the video depending on the state of the UI. To control the state of the UI we will define our UI Controller with the following class:

For now, we just need to create our own CustomUiController instance by passing it a reference to our inflated View on YoutubePlayer.

This is a very basic example, in some more complex cases you will need your CustomUiController to implement YouTubePlayerFullScreenListener , YouTubePlayerListener correctly to be able to interact with Player’s state changes.

If you want to see a more complex example, you can find it here, in the sample app . You can also download the sample app apk and try it on your phone.

 

This gif is the result of a sample, it has a full screen enter / exit button and two text views showing video progress and duration tracking.

V. An API to send YouTube videos from an Android app to a Chromecast device

https://medium.com/@soffritti.pierfrancesco/how-to-send-youtube-videos-from-your-android-app-to-a-chromecast-device-541d59ea1260

BECAUSE. Source

  1. https://medium.com/@soffritti.pierfrancesco/how-to-play-youtube-videos-in-an-android-webview-90e4b89adf79
  2. https://medium.com/@soffritti.pierfrancesco/how-to-play-youtube-videos-in-your-android-app-c40427215230

VII. Reference

  1. https://developers.google.com/youtube/iframe_api_reference
  2. https://developer.android.com/guide/webapps/webview#BindingJavaScript
  3. https://pierfrancescosoffritti.github.io/android-youtube-player/
  4. https://issuetracker.google.com/issues/35172585
  5. https://developers.google.com/youtube/android/player
  6. https://pierfrancescosoffritti.github.io/android-youtube-player/
  7. https://medium.com/@soffritti.pierfrancesco/customize-android-youtube-players-ui-9f32da9e8505
  8. https://medium.com/@soffritti.pierfrancesco/how-to-send-youtube-videos-from-your-android-app-to-a-chromecast-device-541d59ea1260
  9. https://github.com/PierfrancescoSoffritti/android-youtube-player
  10. https://github.com/PierfrancescoSoffritti/android-youtube-player/tree/master/core-sample-app/apk
  11. https://github.com/PierfrancescoSoffritti/android-youtube-player#android-youtube-player

VIII. P / S

If my viblo posts have a Source , this is a translation from the source that is linked to the original post in this section. These are the articles I selected + searched + synthesized from Google in the process of dealing with issues when doing practical projects + useful and interesting for myself. => Translate as an article to rummage through as needed. So when reading the article, please note:

1. You can move to the source to read the original article (extremely recommend).

2. The translated article => It is inevitable that misunderstandings, omissions, confusion due to the difference in language, context as well as the understanding of the translator => Hope you can let Leave comments to complete the problem.

3. The translation is for reference only + contains the meaning of a translated article requested from our company.

4. Hope the article is a little helpful for you (I hope so!). =)))))))

Share the news now

Source : Viblo