WebView 细节，onShowCustomView与JS注入来实现视频全屏播放

概述

WebView是开发中经常使用的组件，在使用中我们需要考虑 文件下载，自定义scheme，重定向，硬件加速，Cookie，HTTPS/HTTP混合等多种问题。

关于 WebView 之前的总结

• Android WebView使用,Http/Https,硬件加速等相关细节详解
• Android hybrid之JS与Native的通信方式

更多参考：

• Android Webview实现文件下载功能
• Android5.0 WebView中Http和Https混合问题
• WebView重定向问题的解决方案
• 谈谈android的硬件加速

而在WebView中播放视频，这种场景非常多，需要H5和本地配合才能完成。一种方案是使用onShowCustomView回调的方式，另一种方案就是 JS 绑定回调的方式,。

过程中会遇到如下问题：

关于腾讯视频源 下的视频放大 事件问题

解决方案和参考

针对视频放大的需求，当即一想非常的简单，但是会有一个问题，那就是 非自己的视频源,比如腾讯的视频，采用腾讯自己的iframe包裹，根本不会回调onShowCustomView

贴出如下一些参考方案：

• cprcrack/VideoEnabledWebView: 采用了 onShowCustomView
• Android webview网页视频无法全屏解决（onShowCustomView不调用） : 采用了 JS 注入的方式。

使用onShowCustomView

参考官网介绍- WebView Reference,结合上述方案，自己归纳整理了相关代码，使用示例MainActivity.java:

 VideoEnabledWebChromeClientConfig lVideoEnabledWebChromeClientConfig =
        VideoEnabledWebChromeClientConfig.newBuilder()
            .mNonVideoLayout(nonVideoLayout)
            .mVideoLayout(videoLayout)
            .mLoadingView(loadingView)
            .mWebView(webView)
            .mToggledFullscreenCallback(mToggledFullscreenCallback)
            .build();

    webChromeClient = new VideoEnabledWebChromeClient(
        lVideoEnabledWebChromeClientConfig);
    webView.setWebChromeClient(webChromeClient);
    // Navigate anywhere you want, but consider that this classes have only been tested on YouTube's mobile site
    webView.loadUrl("http://m.youtube.com");

JS注入的方式

这是通过设置 JavascriptInterface来回调本地代码的一种方式，主要是因为 国内视频源 地址下 事件影藏的比较深,核心代码 JsInjectActivity.java：

    /**
     * 对不同的视频网站分析相应的全屏控件
     *
     * @param url 加载的网页地址
     * @return 相应网站全屏按钮的class标识
     */
    public static String referParser(String url) {
      if (url.contains("letv")) {
        return "hv_ico_screen";               //乐视Tv
      } else if (url.contains("youku")) {
        return "x-zoomin";                    //优酷
      } else if (url.contains("bilibili")) {
        return "icon-widescreen";             //bilibili
      } else if (url.contains("qq")) {
        return "tvp_fullscreen_button";       //腾讯视频
      }

      return null;
    }

总结

• 播放视频，需要开启硬件加速
• 为了让webview点击link能够下载，需要添加 {@link android.webkit.DownloadListener}
• WebView 重定向判断可以用 {@link android.webkit.WebView#getHitTestResult()}
• HTTPS 页面中的 HTTP 元素不显示，如图片，可以用 {@link android.webkit.WebSettings#setMixedContentMode(int)}
• Webview 开启硬件加速会出现各种坑，可以在 {@link WebViewClient#onPageStarted(android.webkit.WebView, java.lang.String, android.graphics.Bitmap)}中关闭硬件加速，在
  {@link WebViewClient#onPageFinished(android.webkit.WebView, java.lang.String)}中开启硬件加速

相关源码：

• Android_WebView_Reference
• WebViewUtil

扩展阅读：

• Android WebView(一) WebView详解
• Android WebView(二) WebView常用API详解
• Chrome custom tabs：在浏览器与本地应用之间流畅的切换