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

最新推荐文章于 2024-09-22 02:27:35 发布

Boo_Wang

最新推荐文章于 2024-09-22 02:27:35 发布

阅读量1w

点赞数 1

分类专栏： Android基础文章标签： WebView 视频播放硬件加速

本文链接：https://blog.csdn.net/wbwjx/article/details/54645313

版权

Android基础专栏收录该内容

63 篇文章 0 订阅

订阅专栏

概述

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

关于 WebView 之前的总结

更多参考：

而在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)}中开启硬件加速