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

#背景
  Androidの開発ではあった一つの課題は以下です。
  一つのアクティビティにWebViewがあります。そのWebViewの内容はYouTubeの動画をembedしたIframeです。当然WebView画面の再生ボタンをクリックしたら動画が再生できますが、なかなかアクティビティに入った瞬間に動画が自動再生できないです。
  しかし、Android側ではYoutubeの動画再生するための専用なActivityを用意しました。それはYouTubeBaseActivityです。YouTubeBaseActivityを継承した自分のActivityをうまく使えば、Youtube iframeが入ったウェブページを自動全画面再生できます。
  ![スクリーンショット 2018-01-31 10.33.18.png](https://qiita-image-store.s3.amazonaws.com/0/191439/405d2bfd-60df-4ea6-4df8-e65e4122e4dc.png)
図1 Youtubeの動画を他のサイトにembedするときのiframeの形

![スクリーンショット 2018-01-31 10.33.23.png](https://qiita-image-store.s3.amazonaws.com/0/191439/f938b002-9845-bff1-eb4a-f07eec39024d.png)
図2 普通のActivityを使ってYoutube iframeを表示する流れ

![スクリーンショット 2018-01-31 10.33.29.png](https://qiita-image-store.s3.amazonaws.com/0/191439/9216f5e7-7355-1b72-f62b-d8537846e248.png)
図3 YouTubeBaseActivityを使ってyoutube iframeを表示する流れ

#実装
####準備
#####1.libsを導入,Google Developersの公式からDownload
[libsを導入](https://developers.google.com/youtube/android/player/downloads/?hl=ja)
![スクリーンショット 2018-01-31 10.41.38.png](https://qiita-image-store.s3.amazonaws.com/0/191439/57a8e8bb-c501-dcbb-bdc0-e8e26654590a.png)
図4　Downloadサイト

#####2.DownloadしたYouTubeAndroidPlayerApi.jarをプロジェクトのlibsに入れます
![スクリーンショット 2018-01-31 10.43.19.png](https://qiita-image-store.s3.amazonaws.com/0/191439/4b76610d-717a-60a5-767e-f97e38237755.png)
図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を使った自動全画面再生
![自動再生 (1).gif](https://qiita-image-store.s3.amazonaws.com/0/191439/1a2dd6bc-ca0f-c8b0-e9af-cd6794b3f667.gif)

####2.普通のActivityを使って、WebViewで表示した再生ボタンをクリックしてから、再生が始まります。
　![手動再生.gif](https://qiita-image-store.s3.amazonaws.com/0/191439/fa2cffaa-c9d7-49dc-26ec-f39ee773df10.gif)


  みんな元気ね