Android 使用WebView 实现播放爱奇艺视频，可全屏(使用的腾讯的X5内核) (一)

Dear 丶 2022-05-21 01:54 597阅读 0赞

项目中有个需求，播放爱奇艺的视频，百度了一通，可能是搜索词有问题，没找到解决方法，后来无意中发现微信可以播放，就想到是否可以使用微信的x5内核，一试发现可以实现。想要实现的效果如下，点击全屏后全屏播放。

![70][]  
首先，使用原生WebView播放爱奇艺的视频，爱奇艺的视频url 如下：

http://dispatcher.video.iqiyi.com/common/shareplayer.html?rel=0&autoplay=1&vid=96f0abef35b4b3a32c6e86738c795868&tvId=959656600&coop=coop_244_af&cid=&aid=223135601&bd=1

直接加载无法播放，而且我们需要控制播放。自动播放，还有全屏播放。

直接接入TBS内核。

[TBS内核官网][TBS]

## 1.下载TBS X5 SDK ##

下载你需要的版本，我使用的完整版本。  
![70 1][]

找到SDK 中的jar文件，添加到项目中的libs目录下，右键执行`Add as Library`。

## 2.找到jniLibs下的.so文件，添加到自己的项目 ##

刚才下载的SDK 中，有一个`SDK接入示例-Android Studio`Demo有我们要的.so文件  
![70 2][]

将`jniLibs`整个copy到项目对应位置。

在项目的build.gradle `defaultConfig {}`中配置

defaultConfig {
            applicationId "com.aoben.playvideodemo"
            minSdkVersion 19
            targetSdkVersion 25
            versionCode 1
            versionName "1.0"
            testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
            ndk {
                abiFilters "armeabi", "armeabi-v7a", "x86", "mips"
            }
        }

## 3.在AndroidManifest.xml里配置权限 ##

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
        <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
        <uses-permission android:name="android.permission.READ_PHONE_STATE" />
        <uses-permission android:name="android.permission.READ_SETTINGS" />
        <uses-permission android:name="android.permission.WRITE_SETTINGS" />
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    
        
        <uses-permission android:name="android.permission.GET_TASKS" />

## 4.在Application的onCreate()方法中，初始化X5内核 ##

a.App 在启动后（例如在 Application 的 onCreate 中）立刻调用 QbSdk 的预加载接口 initX5Environment ，可参考接入示例，第一个参数传入 context，第二个参数传入 callback，不需要 callback 的可以传入 null，initX5Environment 内部会创建一个线程向后台查询当前可用内核版本号，这个函数内是异步执行所以不会阻塞 App 主线程，这个函数内是轻量级执行所以对 App 启动性能没有影响，当 App 后续创建 webview 时就可以首次加载 x5 内核了

public class PlayVideoApplication extends Application { 
        @Override
        public void onCreate() {
            super.onCreate();
            QbSdk.initX5Environment(this, new QbSdk.PreInitCallback() {
                @Override
                public void onCoreInitFinished() {
    
                }
    
                @Override
                public void onViewInitFinished(boolean b) {
    
                }
            });
        }
    }

b.目前，由于SDK WebView所提供的WebView类，是对系统WebView的聚合包装，所以：获取系统内核的WebView或者 x5内核的WebView的宽高

android 系统内核

android.webkit.WebView webView = new android.webkit.WebView(this);
    int width = webView.getWidth();

x5 内核

com.tencent.smtt.sdk.WebView webView = new com.tencent.smtt.sdk.WebView(this);
    int width = webView.getView().getWidth();

## 5.播放视频的Activity配置 ##

兼容视频播放：

1）享受页面视频的完整播放体验需要做如下声明：

页面的Activity需要声明android:configChanges="orientation|screenSize|keyboardHidden"

2）视频为了避免闪屏和透明问题，需要如下设置  
a)网页中的视频，上屏幕的时候，可能出现闪烁的情况，需要如下设置：Activity在onCreate时需要设置:

getWindow().setFormat(PixelFormat.TRANSLUCENT);（这个对宿主没什么影响，建议声明）

b)在非硬绘手机和声明需要controller的网页上，视频切换全屏和全屏切换回页面内会出现视频窗口透明问题，需要如下设置

声明当前<item name="android:windowIsTranslucent">false为不透明。
    特别说明：这个视各app情况所需，不强制需求，如果声明了，对体验更有利

c)以下接口禁止(直接或反射)调用，避免视频画面无法显示：

webview.setLayerType()
    webview.setDrawingCacheEnabled(true);

## 6.输入法设置 ##

避免输入法界面弹出后遮挡输入光标的问题  
方法一：在AndroidManifest.xml中Activity设置

android:windowSoftInputMode="stateHidden|adjustResize"

方法二：在代码中动态设置：

getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE | WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);

## 6.APP混淆处理 ##

由于我们提供的 TBS jar 已经混淆过，所以 App 混淆时可以不再混淆我们的 TBS jar，或者也可以把我们的混淆策略 proguard [点击下载][Link 1] 加入 App 的混淆策略里注意：如果 App没有按照该规则混淆了 TBS jar，可能导致无法使用 x5内核

下一篇文章，[Android 使用WebView 实现播放爱奇艺视频，可全屏(使用的腾讯的X5内核) (二)][Android _WebView _X5_]

参考文章：

[ANDROID webview解决视频无法播放问题][ANDROID webview]

[Android Webview加载网页视频播放遇到的坑][Android Webview]  
[ xumingwang / youkes\_browser][xumingwang _ youkes_browser]

[ webview加载腾讯视频功能的实现][webview]

[ 抛弃Android自带webview，使用腾讯qq浏览器x5内核的webview浏览器][_Android_webview_qq_x5_webview]

[ Android中接入腾讯TBS浏览器WebView的入坑指南][Android_TBS_WebView]

[ 基于WebView的封装，支持原生和腾讯X5内核切换，支持下拉刷新和进度显示并且做了兼容判断][_WebView_X5]

[ Android Studio 使用腾讯浏览服务（替换掉系统自带的WebView）][Android Studio _WebView]

[ TBS(腾讯浏览服务)][TBS 1]

[70]: /images/20220521/4dcb5598706144e58b0bd498bd78c65b.png
[TBS]: https://x5.tencent.com/tbs/technical.html#/sdk
[70 1]: /images/20220521/9b31b6a63f7b4785a8b44cf1f5d48dd1.png
[70 2]: /images/20220521/0024341f4c844ac896fc2548069741b6.png
[Link 1]: http://res.imtt.qq.com/TES/proguard.zip
[Android _WebView _X5_]: https://blog.csdn.net/kenway090704/article/details/80855565
[ANDROID webview]: https://blog.csdn.net/eulinze/article/details/70254457
[Android Webview]: https://blog.csdn.net/wei8023hzp/article/details/78142514
[xumingwang _ youkes_browser]: https://gitee.com/xumingwang/youkes_browser
[webview]: https://blog.csdn.net/baidu_34260638/article/details/72957664
[_Android_webview_qq_x5_webview]: https://blog.csdn.net/tijjyire/article/details/52814798
[Android_TBS_WebView]: https://blog.csdn.net/u010312949/article/details/73136157
[_WebView_X5]: https://blog.csdn.net/tongzhenggang/article/details/53214635
[Android Studio _WebView]: https://blog.csdn.net/qq_17007915/article/details/77840494
[TBS 1]: http://x5.tencent.com/tbs/guide/sdkInit.html