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">
  //<!--自定义的X5WebView-->
    <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&

让链接变为

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的全屏按钮。

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

参考文章：

Android使用腾讯X5内核WebView

腾讯浏览器（X5WebView的使用）

腾讯X5WebView的使用

X5WebView 体验飞一般的感觉

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