Android集成Youtube播放

看了下网上关于集成Youtube视频开发的文章不是很多，

所以今天把我开发中所遇到的问题和实现代码分享给大家。

应用运行环境：AndroidTV端、Android手机端

https://developers.google.com/youtube/iframe_api_reference（YouTube开发者专区）![](https://img-blog.csdnimg.cn/20190718102141212.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0d5Ymox,size_16,color_FFFFFF,t_70)

这是开发者专区中的入口，上边这句话的意思是，使用嵌入式播放器在您的应用中播放视频，并自定义播放体验。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190718102517110.png)

点进来可以看到他提供了Android、IOS、和IFrame（html）三种Api,因为只是在Android设备上运行，所以只讲Android和IFrame

这两种，先说一下这AndroidAPI和IFrameApi的区别，

1、AndroidAPI

如果想播放YouTube视频，Android设备上必须有YouTube的应用，优点是开发快、适配性比较好。

2、IFrameAPI

基于浏览器内核，有些设备使用会有问题，好处是不用YouTube应用的支持，可以直接播放，缺点是需要跨平台开发，步骤繁琐，适配性比较差.

![在这里插入图片描述](https://img-blog.csdnimg.cn/2019071810454856.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0d5Ymox,size_16,color_FFFFFF,t_70)

基本上国外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

play

```

**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/

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190718153344955.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0d5Ymox,size_16,color_FFFFFF,t_70)

在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 playerViewList;//一个页面可以播放多个视频，将所有的播放控件收集到这里进行维护，主要是控制离开页面时候的暂停

//定位到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

Android集成Youtube播放

你可能感兴趣的:(Android集成Youtube播放)