CODEWITHSUNDEEP
androidvideoyoutubeyoutube-api
jjz
jjz

Reputation: 2057

Play Youtube Video inside an Android App without using Android Youtube API

Is there another way to play Youtube videos inside an Android App without using Android Youtube API? We already implemented a solution using the said API, but on some device it requires to downgrade the Youtube app version to play the video. I already searched in Github for possible library that I can use, but most it are dependent to Android Youtube API. Also tried to embed using WebView, but sometimes it crashes.

I'm implementing another solution by parsing a result from http://www.youtube.com/get_video_info?&video_id=p3ND_O6YYg4 and get the value for "dashmpd", then load the value of "dashmpd" and the result can be used as a source in Android's VideoView, but it has no audio. I noticed that video and audio have different sources.

Thanks in advance!

Upvotes: 2

Views: 8191

Answers (2)

Pierfrancesco Soffritti
Pierfrancesco Soffritti

Reputation: 1738

I also had problems with the YouTube Player API so I decided to build my own player library, based on Webview. It is now opensource on GitHub, you can find it here.

To get started you just need to add the library to your dependencies:

dependencies {
  implementation 'com.pierfrancescosoffritti.androidyoutubeplayer:core:*last-version*'
}

Add the View to your layout:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.pierfrancescosoffritti.androidyoutubeplayer.player.YouTubePlayerView
        android:id="@+id/youtube_player_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

And initialize it:

YouTubePlayerView youtubePlayerView = findViewById(R.id.youtube_player_view);
getLifecycle().addObserver(youtubePlayerView);

youtubePlayerView.initialize(new YouTubePlayerInitListener() {
    @Override
    public void onInitSuccess(@NonNull final YouTubePlayer initializedYouTubePlayer) {
        initializedYouTubePlayer.addListener(new AbstractYouTubePlayerListener() {
            @Override
            public void onReady() {
                String videoId = "6JYIGclVQdw";
                initializedYouTubePlayer.loadVideo(videoId, 0);
            }
        });
    }
}, true);

Upvotes: 4

Bertrand Martel
Bertrand Martel

Reputation: 45473

If you really want to go with Youtube iframe inside Webview instead of YoutubePlayerFragment, you will have some work to "re-code" the Youtube Player control layer for Mobile in WebView (screen size / keycode etc...).

I've made a working example that may help you to get start with :

AndroidManifest.xml :

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.yourpackage.name">

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

    <application
        android:allowBackup="true"
        android:hardwareAccelerated="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true">

        <activity
            android:name="com.yourpackage.name.YoutubeActivity"
            android:label="@string/app_name">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

        </activity>

    </application>

</manifest>

Beside, you said you had some crash using Youtube iframe on Weview, maybe you didn't set android:hardwareAccelerated="true" like above

youtube.html in src/main/assets folder :

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <title></title>

  <style type="text/css">

    iframe {
      position: absolute;
      border: none;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    }
  </style>

  <script>

    var player;

    // init player
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '1080',
        width: '1920',
        //videoId: 'Orw8CZpzIDU',
        suggestedQuality: 'hd720',
        playerVars: {rel: 0,showinfo:0},
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });

    }

    function loadVideo(target){
      target.loadVideoById('Orw8CZpzIDU', 0, 'hd720');
    }

    function onPlayerStateChange(event) {

        var playbackQuality = event.target.getPlaybackQuality();
        var suggestedQuality = 'hd720';

        console.log("Quality changed to: " + playbackQuality );

        if( playbackQuality !== 'hd720') {
            console.log("Setting quality to " + suggestedQuality );
            event.target.setPlaybackQuality( suggestedQuality );
        }

        console.log(event.data + " et " + YT.PlayerState.PLAYING);
    }

    // when ready, wait for clicks
    function onPlayerReady(event) {
      event.target.setPlaybackQuality('hd720');
      var player = event.target;
      loadVideo(player);
      return false;
    }

  </script>
</head>

<body id="body">

  <div id="video_div">

    <script src="https://www.youtube.com/iframe_api"></script>

    <div id="bottom">
      <div id="player"></div>
    </div>

  </div>

</body>

</html>

And YoutubeActivity.java :

public class YoutubeActivity extends Activity {

    private WebView webview;

    @Override
    protected void onPause() {
        super.onPause();
        webview.onPause();
    }

    @Override
    protected void onResume() {
        webview.onResume();
        super.onResume();
    }

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        webview = new WebView(this);
        setContentView(webview);

        final WebSettings settings = webview.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setPluginState(WebSettings.PluginState.ON);
        settings.setLoadWithOverviewMode(true);
        settings.setUseWideViewPort(true);

        webview.setWebChromeClient(new WebChromeClient());
        webview.setPadding(0, 0, 0, 0);

        webview.loadUrl("file:///android_asset/youtube.html");
    }

}

Upvotes: 4

Related Questions