Android WebView 播放视频实现横屏全屏播放

小灰灰 2022-05-21 11:47 426阅读 0赞

用webiew播放视频时，要想点击全屏按钮实现全屏播放，播放腾讯视频和播放其他视频的机制不同，针对这两种机制，下面分别给出横屏全屏播放的方法。

（一）全屏播放腾讯视频（需要用到js注入）

/**
         * 设置全屏
         */
        private void setFullScreen() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    if (!island) {
                        // 切换成横屏
                        potraitToland();
                    }else{
                        // 切换成竖屏
                        landToPotrait();
                    }
                }
            });
        }
    
        //横屏转竖屏
        private void landToPotrait(){
            // 切换成竖屏
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    
            RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) video_view.getLayoutParams();
            //修改布局中的height，width属性
            //这里解释一下，因为你的手机横放过来了，所以，webview的高度其实是你手机的宽度，以此类推
            params.width = width;
            params.height = videoHeight;
    //重新设置修改后的布局给控件
            rl_video.setLayoutParams(params);
            video_view.setLayoutParams(params);
            island=false;
        }
    
        //竖屏转横屏
        private void potraitToland(){
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
    
            RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) video_view.getLayoutParams();
            //修改布局中的height，width属性
            //这里解释一下，因为你的手机横放过来了，所以，webview的高度其实是你手机的宽度，以此类推
            params.width = height;
            params.height = width;
    //重新设置修改后的布局给控件
            rl_video.setLayoutParams(params);
            video_view.setLayoutParams(params);
    
            island = true;
        }

/**
         * 设置监听事件
         * 处理各种通知、请求等事件
         * @author
         */
        public class JsObject {
            Context mContext;
    
            JsObject(Context c) {
                mContext = c;
            }
    
            @JavascriptInterface
            public void eventFun(){
                setFullScreen();
            }
        }

DisplayMetrics metric = new DisplayMetrics();
            getWindowManager().getDefaultDisplay().getMetrics(metric);
            width = metric.widthPixels;     // 屏幕宽度（像素）
            height = metric.heightPixels;   // 屏幕高度（像素）

BrowserJsInject.xml文件：

public class BrowserJsInject {
    
        /**
         * Js注入
         * @param url 加载的网页地址
         * @return 注入的js内容，若不是需要适配的网址则返回空javascript
         */
        public static String fullScreenByJs(String url){
            String refer = referParser(url);
            if (null != refer) {
                String js3="window.οnlοad=function(){document.getElementsByClassName('"
                        + referParser(url) + "')[0].addEventListener('click',function(){window.FULLSCREEN.eventFun()})}"
                        + ";";
    //            String js3="window.οnlοad=function(){document.getElementsByClassName('"
    //                    + referParser(url) + "')[0].addEventListener('click',function(){alert('123')})}"
    //                    + ";";
    
                return "javascript:"+js3;
            }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;
        }
    }

至此实现了腾讯视频的全屏播放。

（二）优酷等其他视频的全屏播放

//webView显示的网页url
        protected void setUrl(WebView webView, String url, ProgressBar pb){
            webView.loadUrl(url);
            webView.addJavascriptInterface(new JsObject(KnowledgeVideoDetailAty4.this), "FULLSCREEN");
            webView.setWebViewClient(new WebViewClient() {
    
                @Override
                public void onPageFinished(WebView view, String url) {
                    view.loadUrl(BrowserJsInject.fullScreenByJs(url));
    
                }
               
            webView.setWebChromeClient(new WebViewClients());
            //支持App内部javascript交互
            webView.getSettings().setJavaScriptEnabled(true);
            //自适应屏幕
            webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
            webView.getSettings().setLoadWithOverviewMode(true);
            if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
                webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
            }
        }
        private class WebViewClients extends WebChromeClient {
    
            @Override
            public void onShowCustomView(View view, CustomViewCallback callback) {
                setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
    
                videoContainer.setVisibility(View.VISIBLE);
    
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) video_view.getLayoutParams();
                //修改布局中的height，width属性
                //这里解释一下，因为你的手机横放过来了，所以，webview的高度其实是你手机的宽度，以此类推
                params.width = height;
                params.height = width;
    //重新设置修改后的布局给控件
                view.setLayoutParams(params);
    
                videoContainer.addView(view);
                mCallBack=callback;
                super.onShowCustomView(view, callback);
            }
    
            @Override
            public void onHideCustomView() {
                // 切换成竖屏
                setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) video_view.getLayoutParams();
                //修改布局中的height，width属性
                //这里解释一下，因为你的手机横放过来了，所以，webview的高度其实是你手机的宽度，以此类推
                params.width = width;
                params.height = videoHeight;
    //重新设置修改后的布局给控件
                rl_video.setLayoutParams(params);
                video_view.setLayoutParams(params);
    
    
                if (mCallBack!=null){
                    mCallBack.onCustomViewHidden();
                }
    
                videoContainer.removeAllViews();
                videoContainer.setVisibility(View.GONE);
                super.onHideCustomView();
            }
        }