Android webview网页视频无法全屏解决（onShowCustomView不调用）

置顶好孩子Lee

于 2016-02-04 13:36:43 发布

27324

分类专栏： Android初探文章标签： android 浏览器视频全屏-js注入 webview

本文链接：https://blog.csdn.net/lx331675996/article/details/50634670

版权

Android初探专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Android使用webview来显示和控制网页上的信息。
然而在使用自己开发的浏览器中打开网页视频时，会出现部分网站的视频全屏存在问题。
问题：部分视频网站（如腾讯视频、搜狐视频、优酷等）全频时只是放大了控件，或者无法做到真正的全屏。
需求：希望所有网站点击全屏后，可以实现全屏播放，并且手机屏幕自动横屏。 

分析：个人实践看来，只有爱奇艺和芒果TV（有发现其他的欢迎补充）使用的是H5自带的全屏功能，视屏点击全屏后效果体验很好；而其他网站只是对网页播放视频的控件进行了宽高的调整，其实是伪全屏。H5自带的全屏会调用webchromeclient类中的onShowCustomView()方法，我们可以在这个方法里对我们需要实现的全屏效果做处理；而其他伪全屏的视频网站并没有对移动端的手机做出很好的支持，点击全屏按钮时没有回调onShowCustomView()方法。
思路：对于可以回调onShowCustomView()方法的，自行处理，这里我就不多赘述了；
            对于不能回调onShowCustomView()方法的，通过js注入，并在客户端对js注入的方法绑定，one by one处理全屏问题。

下面贴出代码分析：

JS注入部分：

在网页完成加载时，会回调onPageFinish()方法，在这里可以注入自己需要的js方法。

@Override
        public void onPageFinished(WebView view, String url) {
            view.loadUrl(BrowserJsInject.fullScreenByJs(url));
}

这里的BrowserJsInject是我自己写的一个对于JS注入的公共类，里面内容如下：

public class BrowserJsInject {

    /**
     * Js注入
     * @param url 加载的网页地址
     * @return 注入的js内容，若不是需要适配的网址则返回空javascript
     */
    public static String fullScreenByJs(String url){
        String refer = referParser(url);
        if (null != refer) {
            return "javascript:document.getElementsByClassName('" + referParser(url) + "')[0].addEventListener('click',function(){local_obj.playing();return false;});";
        }else {
            return "javascript:";
        }
    }

    /**
     * 对不同的视频网站分析相应的全屏控件
     * @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;
    }
}

fullScreen(String url)方法将传入的加载的url，通过referParser(String url)方法分析网站类型。referParser中的返回值都是我个人对于不同网站JS调试后找到的，有问题欢迎指出。然后根据不同的网站注入不同的js，实现对全屏按钮的监听操作。其中js字符串中local_obj为客户端绑定的相关类，用于处理js操作。
至此，JS注入部分结束。

Android客户端处理JS绑定：
当JS注入完成后，网页就已经运行了这个脚本，对相应的全屏按钮实现了监听。
在设置webview的相关属性操作时，可以对设置相应的JS操作：

mMainView.addJavascriptInterface(new Object(){

                @JavascriptInterface
                public void playing(){
                    Log.i("video", "=======================");
                    fullScreen(true);
                }

            }, "local_obj");

然后，在点击全屏按钮时就会触发fullScreen()方法，这个方法中处理你所需要实现的相关全屏操作。

比如，全屏并手机横屏：

public void fullScreen(){
        if (mActivity.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
            mCustomScreenLinearLayout.scrollTo(0, 0);
            mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
            mUrlBarAutoShowManager.flag = false;
            mFixedTitlebarContainer.setVisibility(View.GONE);
            showFixTitle(false);
            mBottomNavigation.hideBottomNav();
            mBottomFrameLayout.setVisibility(View.GONE);
        }else {
            mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
            mUrlBarAutoShowManager.flag = true;
            mFixedTitlebarContainer.setVisibility(View.VISIBLE);
            hideFixTitle(false);
            mBottomNavigation.showBottomNav();
            mBottomFrameLayout.setVisibility(View.VISIBLE);
        }
    }