博客

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

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

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

            }
            /**
             * 设置全屏
             */
            private void setFullScreen() {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        if (!island) {
                            // 切换成横屏
                            potraitToland();
                        }else{
                            // 切换成竖屏
                            landToPotrait();
                        }
                    }
                });
            }
        });
        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 {
        public void onProgressChanged(WebView view, int progress) {
            //循环注入
            if(progress>=20){
                video_view.loadUrl(BrowserJsInject.fullScreenByJs(videopath));
            }
        }
    }

 /**
     * 设置全屏
     */
    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();
        }
    }