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

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);
        }
    }

遇到的问题:
有时候整个工程的代码逻辑可能会导致操作的空间不一样,致使例如fullScreen方法中的相关UI等操作无效或异常。这时可通过发送一个简单的广播,在需要进行UI更新的地方接受并操作。

浏览器源码中的Tab类中可做JS注入和发送广播的代码实现,至于UI更新的相关操作,则需要在BaseUi类中实现,原因自己可以去研究浏览器代码的相关实现逻辑。

本人菜鸟,欢迎大神指正。

展开阅读全文
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值