AndroidのActivityでYouTubeの動画を全画面表示させる

背景

Androidの開発ではあった一つの課題は以下です。
一つのアクティビティにWebViewがあります。そのWebViewの内容はYouTubeの動画をembedしたIframeです。当然WebView画面の再生ボタンをクリックしたら動画が再生できますが、なかなかアクティビティに入った瞬間に動画が自動再生できないです。
しかし、Android側ではYoutubeの動画再生するための専用なActivityを用意しました。それはYouTubeBaseActivityです。YouTubeBaseActivityを継承した自分のActivityをうまく使えば、Youtube iframeが入ったウェブページを自動全画面再生できます。

図1 Youtubeの動画を他のサイトにembedするときのiframeの形

図2 普通のActivityを使ってYoutube iframeを表示する流れ

図3 YouTubeBaseActivityを使ってyoutube iframeを表示する流れ

実装

準備

1.libsを導入,Google Developersの公式からDownload

libsを導入

図4　Downloadサイト

2.DownloadしたYouTubeAndroidPlayerApi.jarをプロジェクトのlibsに入れます

図5 libsフォルダに入れた

3 build.gradleを確認、libsフォルダ下のjarをコンパイルします

build.gradle

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])

ソースコード

1 YoutubeActivity.java.

http://172.21.32.104:8080/youtube.htmlは私のローカル環境で実装したYoutube iframeを入れたHTMLファイル。ここは実際の環境によって書き換えます。

public class YoutubeActivity extends YouTubeFailureRecoveryActivity {
    private String parseUrl = "http://172.21.32.104:8080/youtube.html";
    private MyAsyncTask asyncTask;
    private YouTubePlayer mYouTubePlayer = null;
    private Bundle mBundle = null;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_youtube);

        YouTubePlayerView youTubeView = (YouTubePlayerView) findViewById(R.id.youtubeView);
        youTubeView.initialize("test", this);
    }

    @Override
    public void onInitializationSuccess(YouTubePlayer.Provider provider, YouTubePlayer player,
                                        boolean wasRestored) {
        if (!wasRestored) {
                //player.loadVideo("tnhjbOwLaLM");
        }
        mYouTubePlayer = player;
        asyncTask = new MyAsyncTask(parseUrl);
        asyncTask.setmLoadYoutubeUrlListener(new MyAsyncTask.LoadYoutubeUrlListener(){
            @Override
            public void onLoad(String videoId) {
                if(mYouTubePlayer != null){
                    mYouTubePlayer.loadVideo(videoId);
                }
            }
        });
        asyncTask.execute();
    }

    @Override
    protected YouTubePlayer.Provider getYouTubePlayerProvider() {
        return (YouTubePlayerView) findViewById(R.id.youtubeView);
    }

    static public String readHtmlContentFromUrl(String url){
        StringBuilder buf=new StringBuilder();
        try{
            URL des = new URL(url);
            BufferedReader in = new BufferedReader(new InputStreamReader(des.openStream()));
            String str;

            while ((str=in.readLine()) != null) {
                buf.append(str);
            }
        }catch (Exception e){
            e.printStackTrace();
        }

        String res = buf.toString();
        return  res;
    }
}


class MyAsyncTask extends  AsyncTask<Void, Void, String>{
    private String parseUrl = null;
    private LoadYoutubeUrlListener mLoadYoutubeUrlListener = null;
    public interface LoadYoutubeUrlListener{
        void onLoad(String videoId);
    }

    public void setmLoadYoutubeUrlListener(LoadYoutubeUrlListener _mLoadYoutubeUrlListener) {
        this.mLoadYoutubeUrlListener = _mLoadYoutubeUrlListener;
    }

    public MyAsyncTask(String parseUrl) {
        this.parseUrl = parseUrl;
    }

    @Override
    protected String doInBackground(Void... params) {
        try {
            return YoutubeActivity.readHtmlContentFromUrl(parseUrl);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    @Override
    protected void onPostExecute(String html) {
        if(html == null) return;
        Matcher matcher1 = Pattern.compile("https?:\\/\\/www\\.youtube\\.com\\/embed\\/([^\\?]*)\\?").matcher(html);
        boolean tmpFind1 = matcher1.find();
        int count = matcher1.groupCount();
        if(tmpFind1 && matcher1.groupCount()>=0){
            String matchUrlPattern = matcher1.group(0);
            String videoId = matcher1.group(1);
            String cc = videoId;
            if(mLoadYoutubeUrlListener != null){
                mLoadYoutubeUrlListener.onLoad(videoId);
            }
        }
    }
}

2.YouTubeFailureRecoveryActivity.java

getYouTubePlayerProvider().initialize("????", this);の????の部分は自分のGoogle develop tokenを入れてください

public abstract class YouTubeFailureRecoveryActivity extends YouTubeBaseActivity implements
    YouTubePlayer.OnInitializedListener {
  private static final int RECOVERY_DIALOG_REQUEST = 1;
  @Override
  public void onInitializationFailure(YouTubePlayer.Provider provider,
      YouTubeInitializationResult errorReason) {
    if (errorReason.isUserRecoverableError()) {
      errorReason.getErrorDialog(this, RECOVERY_DIALOG_REQUEST).show();
    } else {
      String errorMessage = String.format("error", errorReason.toString());
      Toast.makeText(this, errorMessage, Toast.LENGTH_LONG).show();
    }
  }

  @Override
  protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == RECOVERY_DIALOG_REQUEST) {
      // Retry initialization if user performed a recovery action
      getYouTubePlayerProvider().initialize("????", this);
    }
  }
  protected abstract YouTubePlayer.Provider getYouTubePlayerProvider();

}

3.activity_youtube.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.example.syoui.imagetab.YoutubeActivity">


    <com.google.android.youtube.player.YouTubePlayerView
        android:id="@+id/youtubeView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </com.google.android.youtube.player.YouTubePlayerView>

</android.support.constraint.ConstraintLayout>

4.youtube.html ローカル環境で実行したyoutube.html.Youtube iframeが入ってあります。

<!doctype html>
<html>
<head>
    <title>Android WebView</title>
    <style>
        html,
        body {
            height: 95%;
        }
        #youtube,
        #frame {
            margin: 0 auto;
            height: 95%;
        }
    </style>
</head>
<body>
    <div id="youtube">
        <iframe id="frame" src="https://www.youtube.com/embed/pXEJvmKTjPI?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
</body>
</html>

結果

1. YouTubeBaseActivityを使った自動全画面再生

2.普通のActivityを使って、WebViewで表示した再生ボタンをクリックしてから、再生が始まります。

　

みんな元気ね