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

女爷i 2022-05-21 04:08 213阅读 0赞

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

## 1.自定义X5WebView ##

这个类，X5的Demo中也有，我们主要做一些修改，去掉那些提示文字。

public class X5WebView extends WebView { 
        TextView title;
        private WebViewClient client = new WebViewClient() {
            /** * 防止加载网页时调起系统浏览器 */
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
    
            @Override
            public void onPageFinished(WebView webView, String s) {
                super.onPageFinished(webView, s);
                //获取加载进度
                Toast.makeText(webView.getContext(), "加载完成", Toast.LENGTH_LONG).show();
            }
        };
    
        @SuppressLint("SetJavaScriptEnabled")
        public X5WebView(Context arg0, AttributeSet arg1) {
            super(arg0, arg1);
            this.setWebViewClient(client);
            // this.setWebChromeClient(chromeClient);
            // WebStorage webStorage = WebStorage.getInstance();
            initWebViewSettings();
            this.getView().setClickable(true);
        }
    
        private void initWebViewSettings() {
            WebSettings webSetting = this.getSettings();
            webSetting.setJavaScriptEnabled(true);
            webSetting.setJavaScriptCanOpenWindowsAutomatically(true);
            webSetting.setAllowFileAccess(true);
            webSetting.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
            webSetting.setSupportZoom(true);
            webSetting.setBuiltInZoomControls(true);
            webSetting.setUseWideViewPort(true);
            webSetting.setSupportMultipleWindows(true);
            // webSetting.setLoadWithOverviewMode(true);
            webSetting.setAppCacheEnabled(true);
            // webSetting.setDatabaseEnabled(true);
            webSetting.setDomStorageEnabled(true);
            webSetting.setGeolocationEnabled(true);
            webSetting.setAppCacheMaxSize(Long.MAX_VALUE);
            // webSetting.setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);
            webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);
            // webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH);
            webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);
    
            // this.getSettingsExtension().setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);//extension
            // settings 的设计
        }
    
        @Override
        protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
            boolean ret = super.drawChild(canvas, child, drawingTime);
            canvas.save();
            Paint paint = new Paint();
            paint.setColor(0x7fff0000);
            paint.setTextSize(24.f);
            paint.setAntiAlias(true);
            if (getX5WebViewExtension() != null) {
                canvas.drawText(this.getContext().getPackageName() + "-pid:"
                        + android.os.Process.myPid(), 10, 50, paint);
                canvas.drawText(
                        "X5 Core:" + QbSdk.getTbsVersion(this.getContext()), 10,
                        100, paint);
            } else {
                canvas.drawText(this.getContext().getPackageName() + "-pid:"
                        + android.os.Process.myPid(), 10, 50, paint);
                canvas.drawText("Sys Core", 10, 100, paint);
            }
            canvas.drawText(Build.MANUFACTURER, 10, 150, paint);
            canvas.drawText(Build.MODEL, 10, 200, paint);
            canvas.restore();
            return ret;
        }
    
        public X5WebView(Context arg0) {
            super(arg0);
            setBackgroundColor(85621);
        }
    
    }

## 2.加载视频 ##

1.main.xml

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.aoben.playvideodemo.MainActivity">
      //
        <com.aoben.playvideodemo.X5WebView android:id="@+id/acty_web" android:layout_width="match_parent" android:layout_height="200dp" android:text="Hello World!" />
    </RelativeLayout>

2.MainActivity.java

public class MainActivity extends AppCompatActivity { 
        private X5WebView webView;
    
        //要播放的视频地址
        private String videoUrl = "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";
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            webView = (X5WebView) findViewById(R.id.acty_web);
            getWindow().setFormat(PixelFormat.TRANSLUCENT);
            initViewsTBS(videoUrl);
        }
    
        private void initViewsTBS(String videoUrl) {
            webView.loadUrl(videoUrl);
        }
    }

爱奇艺视频的播放地址

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

通过这两部后，可以播放，但是还有一点小问题，就是，原来的爱奇艺自带的全屏按钮还存在，如图，点击的时候，全屏异常，不能全屏，这时我们需要自己在这个链接中的`html?`后面添加`rel=0&autoplay=1&`或者`autoPlay=true&`

![70][]

让链接变为

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

这样当视频加载完后，会直接出现X5的全屏按钮。

![70 1][]  
通过X5 内核实现的WebView播放视频，稳定性也很好。

参考文章：

[Android使用腾讯X5内核WebView][Android_X5_WebView]

[腾讯浏览器（X5WebView的使用）][X5WebView]

[腾讯X5WebView的使用][X5WebView 1]

[X5WebView 体验飞一般的感觉][X5WebView 2]

[Android接入腾讯X5内核以及相关问题以及WebView相关知识][Android_X5_WebView 1]

[Android _WebView _X5_]: https://blog.csdn.net/Kenway090704/article/details/80833406
[70]: /images/20220521/da2546f733624485a16083e8cec092e3.png
[70 1]: /images/20220521/f8563634e1614e92bb4d999f4a625ea6.png
[Android_X5_WebView]: https://www.jianshu.com/p/0c4cd08bd4cd
[X5WebView]: https://blog.csdn.net/EUEHEUEN/article/details/79414551
[X5WebView 1]: https://www.jianshu.com/p/d30c8c975fdd
[X5WebView 2]: https://blog.csdn.net/u014522840/article/details/77476721
[Android_X5_WebView 1]: https://www.jianshu.com/p/31999dd83263?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation