배경

Android 개발이었던 한 가지 과제는 다음과 같습니다.
하나의 활동에 WebView가 있습니다. 그 WebView의 내용은 YouTube 동영상을 임베드한 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 다운로드 사이트

2.다운로드한 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에 표시된 재생 버튼을 클릭한 다음 재생이 시작됩니다.

모두 괜찮아.