看了下网上关于集成Youtube视频开发的文章不是很多，
所以今天把我开发中所遇到的问题和实现代码分享给大家。
应用运行环境：AndroidTV端、Android手机端
https://developers.google.com/youtube/iframe_api_reference（YouTube开发者专区）
这是开发者专区中的入口，上边这句话的意思是，使用嵌入式播放器在您的应用中播放视频，并自定义播放体验。
点进来可以看到他提供了Android、IOS、和IFrame（html）三种Api,因为只是在Android设备上运行，所以只讲Android和IFrame
这两种，先说一下这AndroidAPI和IFrameApi的区别，
1、AndroidAPI
如果想播放YouTube视频，Android设备上必须有YouTube的应用，优点是开发快、适配性比较好。
2、IFrameAPI
基于浏览器内核，有些设备使用会有问题，好处是不用YouTube应用的支持，可以直接播放，缺点是需要跨平台开发，步骤繁琐，适配性比较差.
基本上国外Android设备上都会自带YouTube应用，但是我负责的项目在AndroidTV端运行，
Android盒子更新比较慢，YouTube对2012年以前的智能电视不再提供支持，所以项目开发中我选择了IFrameAPI的方式。
所以就先讲IFrameApi的方式。
**IFrameAPI**
Android端需要做的有两件事
1、Android通过webview调用html，在接口中传入YouTube视频的id、以及视频的宽高 。
如何获取视频id？
访问Youtube的网站，当前播放视频地址栏v后面的就是视频id，如：
https://www.youtube.com/watch?v=1xRjMEIzn48
2、通过Android的遥控器监听事件调用html中的方式控制视频的播放、暂停、快进、快退功能。
android代码
**MainActivity**
```javascript
package com.example.administrator.intelchange;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends Activity {
private static final String TAG = "MainActivity";
WebView wv_common_webview;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
DisplayMetrics outMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
int widthPixels = outMetrics.widthPixels;
int heightPixels = outMetrics.heightPixels;
wv_common_webview = (WebView) findViewById(R.id.webview);
String id="_vw0dH3ic4A";
//调用本地html
//wv_common_webview.loadUrl("file:///android_asset/111.html");
//调用服务端html
wv_common_webview.loadUrl("http://ott.bangtv.tv/yt/play.html?v="+id+"&w="+widthPixels*0.75+"&h="+heightPixels*0.75);
//加上下面这段代码可以使网页中的链接不以浏览器的方式打开
wv_common_webview.setWebViewClient(new WebViewClient());
//得到webview设置
WebSettings webSettings = wv_common_webview.getSettings();
//允许使用javascript
webSettings.setJavaScriptEnabled(true);
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
wv_common_webview.getSettings().setBuiltInZoomControls(true);
wv_common_webview.getSettings().setUseWideViewPort(true);
wv_common_webview.getSettings().setLoadWithOverviewMode(true);
wv_common_webview.getSettings().setTextZoom(100);
wv_common_webview.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
// 如果页面中链接，如果希望点击链接继续在当前browser中响应，
// 而不是新开Android的系统browser中响应该链接，必须覆盖webview的WebViewClient对象
wv_common_webview.setWebViewClient(new WebViewClient() {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 重写此方法表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边
view.loadUrl(url);
return true;
}
});
}
//调用html中的方法，传入按键状态
@SuppressLint("SetJavaScriptEnabled")
public void testJS(int keycode,String key) {
if (keycode == KeyEvent.KEYCODE_DPAD_LEFT) {
wv_common_webview.loadUrl("javascript:operation( "+KeyEvent.KEYCODE_DPAD_LEFT+","+key+")");
}else if(keycode == KeyEvent.KEYCODE_DPAD_RIGHT){
wv_common_webview.loadUrl("javascript:operation( "+KeyEvent.KEYCODE_DPAD_RIGHT+","+key+")");
}
else if(keycode == KeyEvent.KEYCODE_DPAD_UP){
wv_common_webview.loadUrl("javascript:operation( "+KeyEvent.KEYCODE_DPAD_UP+","+key+")");
}else if(keycode == KeyEvent.KEYCODE_DPAD_DOWN){
wv_common_webview.loadUrl("javascript:operation( "+KeyEvent.KEYCODE_DPAD_DOWN+","+key+")");
}
else if(keycode == KeyEvent.KEYCODE_DPAD_CENTER){
wv_common_webview.loadUrl("javascript:operation( "+KeyEvent.KEYCODE_DPAD_CENTER+","+key+")");
}
}
//
/**
* 监听遥控器按键事件
*/
@Override
public boolean dispatchKeyEvent(KeyEvent event) {
// TODO Auto-generated method stub
// if (event.getKeyCode() == KeyEvent.KEYCODE_DPAD_LEFT
// | event.getKeyCode() == KeyEvent.KEYCODE_DPAD_UP
// | event.getKeyCode() == KeyEvent.KEYCODE_DPAD_RIGHT
// | event.getKeyCode() == KeyEvent.KEYCODE_DPAD_DOWN‘’
// | event.getKeyCode() == KeyEvent.KEYCODE_DPAD_CENTER
// && event.getAction() == KeyEvent.ACTION_DOWN) {
// testJS(event.getKeyCode(),"0");
//
// }
// if (event.getKeyCode() == KeyEvent.KEYCODE_DPAD_LEFT
// | event.getKeyCode() == KeyEvent.KEYCODE_DPAD_UP
// |event.getKeyCode() == KeyEvent.KEYCODE_DPAD_RIGHT
// | event.getKeyCode() == KeyEvent.KEYCODE_DPAD_DOWN
// &&event.getAction() == KeyEvent.ACTION_UP) {
// testJS(event.getKeyCode(),"1");
//
// }
//按键按下时传参数给html，”0“为按下，”1“为按键抬起
if(event.getKeyCode() == KeyEvent.KEYCODE_DPAD_LEFT&&event.getAction() == KeyEvent.ACTION_DOWN ){
testJS(event.getKeyCode(),"0");
// Toast.makeText(this,"点击了左键",0.LENGTH_SHORT).show();
}
if(event.getKeyCode() == KeyEvent.KEYCODE_DPAD_LEFT&& event.getAction() == KeyEvent.ACTION_UP){
testJS(event.getKeyCode(),"1");
// Toast.makeText(this,"点击了左键",Toast.LENGTH_SHORT).show();
}
if(event.getKeyCode() == KeyEvent.KEYCODE_DPAD_RIGHT&&event.getAction() == KeyEvent.ACTION_DOWN){
// Toast.makeText(this,"点击了右键",Toast.LENGTH_SHORT).show();
testJS(event.getKeyCode(),"0");
}
if(event.getKeyCode() == KeyEvent.KEYCODE_DPAD_RIGHT&&event.getAction() == KeyEvent.ACTION_UP){
// Toast.makeText(this,"点击了右键",Toast.LENGTH_SHORT).show();
testJS(event.getKeyCode(),"1");
}
if(event.getKeyCode() == KeyEvent.KEYCODE_DPAD_UP&&event.getAction() == KeyEvent.ACTION_DOWN){
// Toast.makeText(this,"点击了上键",Toast.LENGTH_SHORT).show();
testJS(event.getKeyCode(),"0");
}
if(event.getKeyCode() == KeyEvent.KEYCODE_DPAD_UP&&event.getAction() == KeyEvent.ACTION_UP){
// Toast.makeText(this,"点击了上键",Toast.LENGTH_SHORT).show();
testJS(event.getKeyCode(),"1");
}
if(event.getKeyCode() == KeyEvent.KEYCODE_DPAD_DOWN&&event.getAction() == KeyEvent.ACTION_DOWN){
// Toast.makeText(this,"点击了下键",Toast.LENGTH_SHORT).show();
testJS(event.getKeyCode(),"0");
}
if(event.getKeyCode() == KeyEvent.KEYCODE_DPAD_DOWN&&event.getAction() == KeyEvent.ACTION_UP){
// Toast.makeText(this,"点击了下键",Toast.LENGTH_SHORT).show();
testJS(event.getKeyCode(),"1");
}
if(event.getKeyCode() == KeyEvent.KEYCODE_DPAD_CENTER&& event.getAction() != KeyEvent.ACTION_UP){
testJS(event.getKeyCode(),"0");
// Toast.makeText(this,"点击了确定键",Toast.LENGTH_SHORT).show();
}
if (event.getKeyCode() == KeyEvent.KEYCODE_BACK){
this.finish();
}
return true;
}
}
```
```javascript
android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent">
```
**html代码**
urlhelper.js
```javascript
/**
* 获取url参数
* @param {string} name
*/
function getQueryString(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
```
player.html
```javascript
```
**AndroidAPI**
要运行AndroidAPi的Youtube视频，需要：
1、Android Studio SDK 1.2或更高版本。
2、适用 于API 23或更高版本的Android SDK包，包括最新版本的Google Repository，Android支持库和Google Play服务。
3、在您的测试设备上访问互联网。
4、Google帐户。
开发前，需要在google注册您的应用，包括你的数字签名和证书。
1、进入google[开发控制台](https://console.developers.google.com/)，
2、创建一个新项目。我的是ALXYoutubePlayer。
3、在该项目中创建后出现的页面上，展开API和验证左侧边栏，单击的API。在API的列表，点击YouTube数据API并启用
YouTube数据API V3后面的页面上。
在左侧边栏，选择证书。对于资格证书，API支持的OAuth 2.0，使用服务帐户的API密钥和。我们将使用API密钥选项。
选择API密钥从添加凭据下拉菜单。会显示一个弹出让你指定密钥类型。选择Android的关键。接下来选择添加包名和指纹，并添
加Android应用程序的包名（我的是vc.zz.qduxsh.alxyoutubeplayer），然后在终端中运行以下命令来获取SHA-1证书指纹。
keytool -list -v -keystore ~/.android/debug.keystore‘’
输入的android系统提示时作为密码。上位于调试密钥库上面的命令打印资料〜/ .android / debug.keystore您的计算机上。这是通
过Eclipse中或Android工作室当你第一次建立了一个Android应用程序自动生成的。在终端方面，你会看到MD5和SHA-1证书指
纹。复制SHA-1指纹，并将其粘贴在谷歌开发者控制台，然后点击创建按钮。API密钥将会产生。稍后我们将使用此。
在Andropid项目中，创建一个名为类Config.java并粘贴以下。
```javascript
package vc.zz.qduxsh.alxyoutubeplayer;
/**
* Created by gzj on 7/15/19.
*/
public final class Config {
private Config() {
}
public static final String YOUTUBE_API_KEY = "YOUR API KEY";
}
```
然后一个下载的最新版本的Android版YouTube播放器API的。下载完成后放到libs目录下，右键--》add as library
地址：https://developers.google.com/youtube/android/player/downloads/
在build.gradle中加入
compile files('libs/YouTubeAndroidPlayerApi.jar')
activity_youtube.xml
```javascript
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> android:id="@+id/youtube_view" android:layout_width="match_parent" android:layout_height="wrap_content"/>
```
MainActivity.java
```javascript
package vc.zz.qduxsh.alxyoutubeplayer;
import android.content.Intent;
import android.content.pm.ActivityInfo;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebChromeClient;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;
import vc.zz.qduxsh.alxyoutubeplayer.player.YoutubePlayerView;
public class MainActivity extends AppCompatActivity {
private List
//定位到youtube的某个视频有三种方式
public static final String VideoUrl_normal = "https://www.youtube.com/watch?v=PFKutKoYX7E";//这种是最普通的写在地址栏中的视频地址
private View mVideoProgressView;
private View mCustomView;//全屏显示的View
private View mVideoFullScreenBack;
private LinearLayout ll_player_container;
private int mOriginalSystemUiVisibility;
private int mOriginalOrientation;
private WebChromeClient.CustomViewCallback mCustomViewCallback;
Button btnWebview;
Button btnvideo;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnWebview = (Button) findViewById(R.id.btn_webview);
btnvideo = (Button) findViewById(R.id.btn_videoview);
btnWebview.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String videoUrl = VideoUrl_normal;
String videoID = YoutubePlayerView.parseIDfromVideoUrl(videoUrl);
Log.i("Alex","视频的ID是=="+videoID);
View youtubeView = LayoutInflater.from(MainActivity.this).inflate(R.layout.layout_youtube_player, null);
YoutubePlayerView youtubePlayerView = (YoutubePlayerView) youtubeView.findViewById(R.id.youtubePlayerView);
youtubePlayerView.setAutoPlayerHeight(MainActivity.this);
youtubePlayerView.initialize(videoID, new YoutubePlayerCallBack(youtubePlayerView), mWebChromeClient);
mVideoFullScreenBack = findViewById(R.id.detail_video_back);
if(playerViewList == null){
playerViewList = new ArrayList<>();
}
ll_player_container = (LinearLayout) findViewById(R.id.ll_player_container);
ll_player_container.addView(youtubeView);
playerViewList.add(youtubePlayerView);
youtubePlayerView.seekToMillis(80000);
}
});
btnvideo.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(MainActivity.this,YoutubeActivity.class);
startActivity(intent);
}
});
}
@Override
protected void onStart() {
super.onStart();
}
private class YoutubePlayerCallBack implements YoutubePlayerView.YouTubeListener {
private YoutubePlayerView mYoutubeView;
YoutubePlayerCallBack(YoutubePlayerView view){
this.mYoutubeView = view;
}
@Override
public void onReady() {
}
@Override
public void onStateChange(YoutubePlayerView.STATE state) {
if(state == YoutubePlayerView.STATE.PLAYING && mYoutubeView!=null){
if(playerViewList!=null){
for(YoutubePlayerView v : playerViewList){
if (v != null && v != mYoutubeView && (v.getPlayerState() == YoutubePlayerView.STATE.PLAYING ||
v.getPlayerState() == YoutubePlayerView.STATE.PAUSED)) {
v.stop();
}
}
}
}
}
@Override
public void onPlaybackQualityChange(String arg) {
}
@Override
public void onPlaybackRateChange(String arg) {
}
@Override
public void onError(String arg) {
}
@Override
public void onApiChange(String arg) {
}
@Override
public void onCurrentSecond(double second) {
}
@Override
public void onDuration(double duration) {
}
@Override
public void logs(String log) {
}
}
/**
* 用于全屏显示的代码
*/
private WebChromeClient mWebChromeClient = new WebChromeClient(){
@Override
public View getVideoLoadingProgressView() {
if (mVideoProgressView == null) {
LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
mVideoProgressView = inflater.inflate(R.layout.video_layout_loading, null);
}
return mVideoProgressView;
}
@Override
public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback) {
// if a view already exists then immediately terminate the new one
if (mCustomView != null) {
onHideCustomView();
return;
}
// 1. Stash the current state
mCustomView = view;
mOriginalSystemUiVisibility = MainActivity.this.getWindow().getDecorView().getSystemUiVisibility();
mOriginalOrientation = MainActivity.this.getRequestedOrientation();
Log.i("Alex","原来的屏幕方向是"+mOriginalOrientation);
// 2. Stash the custom view callback
mCustomViewCallback = callback;
// 3. Add the custom view to the view hierarchy
FrameLayout decor = (FrameLayout) MainActivity.this.getWindow().getDecorView();
decor.addView(mCustomView, new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT));
if(mVideoFullScreenBack!=null){
mVideoFullScreenBack.setVisibility(View.VISIBLE);
}
// 4. Change the state of the window
MainActivity.this.getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE |
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
View.SYSTEM_UI_FLAG_FULLSCREEN |
View.SYSTEM_UI_FLAG_IMMERSIVE);
MainActivity.this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
}
@Override
public void onHideCustomView() {
// 1. Remove the custom view
FrameLayout decor = (FrameLayout) MainActivity.this.getWindow().getDecorView();
decor.removeView(mCustomView);
mCustomView = null;
if(mVideoFullScreenBack!=null){
mVideoFullScreenBack.setVisibility(View.GONE);
}
// 2. Restore the state to it's original form
MainActivity.this.getWindow().getDecorView().setSystemUiVisibility(mOriginalSystemUiVisibility);
MainActivity.this.setRequestedOrientation(mOriginalOrientation);
// 3. Call the custom view callback
if(mCustomViewCallback!=null){
mCustomViewCallback.onCustomViewHidden();
mCustomViewCallback = null;
}
}
};
@Override
public void onPause() {
//视频播放器当页面停止的时候所有的视频播放全部暂停
if(playerViewList!=null){
for(YoutubePlayerView v : playerViewList){
if(v.getPlayerState() == YoutubePlayerView.STATE.PLAYING ){
v.pause();
}else if(v.getPlayerState() == YoutubePlayerView.STATE.BUFFERING){
v.stop();
}
}
}
super.onPause();
}
@Override
public void onDestroy() {
super.onDestroy();
if (playerViewList != null) {
for (YoutubePlayerView v : playerViewList) {
if (v != null) v.onDestroy();
}
}
}
public boolean closeFullScreen(){
if(mCustomView!=null && mCustomViewCallback!=null){
mWebChromeClient.onHideCustomView();
return true;
}
return false;
}
@Override
public void onBackPressed() {
Log.i("Alex", "进入onBackPressed方法");
closeFullScreen();
super.onBackPressed();
}
}
```
在上面的代码中，我们创建一个类，是的子类YouTubeBaseActivity。这需要利用YouTubePlayerView。我们使用
YouTubePlayer.OnInitializedListener侦听初始化成功或失败。该接口有两个方法，一个名为onInitializationFailure（）和
onInitializationSuccess（） 。
例如，如果YouTube应用是不是安装在用户的设备上或已过期，对话将有一个提示，经确认后，将打开谷歌Play商店安装或相应
地更新它的用户。如果YouTube应用在设备上禁用，则该提示将打开系统设置为用户启用它。
当用户从错误恢复对话返回，的onActivityResult（）被调用检查，查看是否用户执行的恢复操作。如果是这样，我们重试初始
化。
运行该应用程序，你应该能够发挥在代码中指定的视频。请注意，您将需要您的设备上的YouTube应用。该API客户端库与分布
的YouTube应用为Android平台的部分服务进行交互。用户需要运行移动版YouTube应用程式（或更高）的版本4.2.16使用API。
通常情况下，运行Android 2.2（升级Froyo）或更高版本有谷歌Play商店应用的设备应该能够运行向上的最新版本的YouTube应
用。
这意味着什么，除非你已经安装了谷歌Apps的虚拟设备，您将无法测试在模拟器上的代码。默认的Android模拟器不支持在设备
上安装谷歌企业应用套件，但如果你使用的模拟器像Genymotion，就可以使用了。即使在我的模拟器安装了谷歌企业应用套
件，我仍然无法播放视频。视频缩略图加载没关系的看法，但在攻播放按钮，加载指示灯会出现，但再装载会失败，“连接到服
务器丢失”的消息。您可能需要准备一个真正的设备。
结论
Android版的YouTube库提供了一个很好的API，你可以自定义此API，我们仅仅触及了它的边缘。要了解更多关于库，一定要通
过文档阅读并随附库下载示例应用程序。
你可以在这里下载完整的项目。记得放置在您的密钥Config.java文件。
IFrameAPI：https://github.com/gongzaijing/intelchange.git
AndroidAPI：https://github.com/gongzaijing/Android-VideoTube-master.git