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

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

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

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

  1. //webView显示的网页url
  2.     protected void setUrl(WebView webView, String url, ProgressBar pb){
  3.         webView.loadUrl(url);
  4.         webView.addJavascriptInterface(new JsObject(KnowledgeVideoDetailAty4.this), "FULLSCREEN");
  5.         webView.setWebViewClient(new WebViewClient() {
  7.             @Override
  8.             public void onPageFinished(WebView view, String url) {
  9.                 view.loadUrl(BrowserJsInject.fullScreenByJs(url));
  11.             }
  12.             /**
  13.              * 设置全屏
  14.              */
  15.             private void setFullScreen() {
  16.                 runOnUiThread(new Runnable() {
  17.                     @Override
  18.                     public void run() {
  19.                         if (!island) {
  20.                             // 切换成横屏
  21.                             potraitToland();
  22.                         }else{
  23.                             // 切换成竖屏
  24.                             landToPotrait();
  25.                         }
  26.                     }
  27.                 });
  28.             }
  29.         });
  30.         webView.setWebChromeClient(new WebViewClients());
  31.         //支持App内部javascript交互
  32.         webView.getSettings().setJavaScriptEnabled(true);
  33.         //自适应屏幕
  34.         webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
  35.         webView.getSettings().setLoadWithOverviewMode(true);
  36.         if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
  37.             webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
  38.         }
  39.     }
  40.     private class WebViewClients extends WebChromeClient {
  41.         public void onProgressChanged(WebView view, int progress) {
  42.             //循环注入
  43.             if(progress>=20){
  44.                 video_view.loadUrl(BrowserJsInject.fullScreenByJs(videopath));
  45.             }
  46.         }
  47.     }
  49. /**
  50.      * 设置全屏
  51.      */
  52.     private void setFullScreen() {
  53.         runOnUiThread(new Runnable() {
  54.             @Override
  55.             public void run() {
  56.                 if (!island) {
  57.                     // 切换成横屏
  58.                     potraitToland();
  59.                 }else{
  60.                     // 切换成竖屏
  61.                     landToPotrait();
  62.                 }
  63.             }
  64.         });
  65.     }
  67.     //横屏转竖屏
  68.     private void landToPotrait(){
  69.         // 切换成竖屏
  70.         setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
  72.         RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) video_view.getLayoutParams();
  73.         //修改布局中的height，width属性
  74.         //这里解释一下，因为你的手机横放过来了，所以，webview的高度其实是你手机的宽度，以此类推
  75.         params.width = width;
  76.         params.height = videoHeight;
  77. //重新设置修改后的布局给控件
  78.         rl_video.setLayoutParams(params);
  79.         video_view.setLayoutParams(params);
  80.         island=false;
  81.     }
  83.     //竖屏转横屏
  84.     private void potraitToland(){
  85.         setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
  87.         RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) video_view.getLayoutParams();
  88.         //修改布局中的height，width属性
  89.         //这里解释一下，因为你的手机横放过来了，所以，webview的高度其实是你手机的宽度，以此类推
  90.         params.width = height;
  91.         params.height = width;
  92. //重新设置修改后的布局给控件
  93.         rl_video.setLayoutParams(params);
  94.         video_view.setLayoutParams(params);
  96.         island = true;
  97.     }
  99. /**
  100.      * 设置监听事件
  101.      * 处理各种通知、请求等事件
  102.      * @author
  103.      */
  104.     public class JsObject {
  105.         Context mContext;
  107.         JsObject(Context c) {
  108.             mContext = c;
  109.         }
  111.         @JavascriptInterface
  112.         public void eventFun(){
  113.             setFullScreen();
  114.         }
  115.     }
  117. DisplayMetrics metric = new DisplayMetrics();
  118.         getWindowManager().getDefaultDisplay().getMetrics(metric);
  119.         width = metric.widthPixels;     // 屏幕宽度（像素）
  120.         height = metric.heightPixels;   // 屏幕高度（像素）

BrowserJsInject.xml文件：

  1. public class BrowserJsInject {
  3.     /**
  4.      * Js注入
  5.      * @param url 加载的网页地址
  6.      * @return 注入的js内容，若不是需要适配的网址则返回空javascript
  7.      */
  8.     public static String fullScreenByJs(String url){
  9.         String refer = referParser(url);
  10.         if (null != refer) {
  11.             String js3="window.οnlοad=function(){document.getElementsByClassName('"
  12.                     + referParser(url) + "')[0].addEventListener('click',function(){window.FULLSCREEN.eventFun()})}"
  13.                     + ";";
  14. //            String js3="window.οnlοad=function(){document.getElementsByClassName('"
  15. //                    + referParser(url) + "')[0].addEventListener('click',function(){alert('123')})}"
  16. //                    + ";";
  18.             return "javascript:"+js3;
  19.         }else {
  21.             return "javascript:";
  22.         }
  23.     }
  25.     /**
  26.      * 对不同的视频网站分析相应的全屏控件
  27.      * @param url 加载的网页地址
  28.      * @return 相应网站全屏按钮的class标识
  29.      */
  30.     public static String referParser(String url){
  31.         if (url.contains("letv")) {
  32.             return "hv_ico_screen";   //乐视Tv
  33.         }else if (url.contains("youku")) {
  34.             return "x-zoomin";//优酷
  35.         }else if (url.contains("bilibili")) {
  36.             return "icon-widescreen"; //bilibili
  37.         }else if (url.contains("qq")) {
  38.             return "tvp_fullscreen_button";   //腾讯视频
  39.         }
  41.         return null;
  42.     }
  43. }

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

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

  1. //webView显示的网页url
  2.     protected void setUrl(WebView webView, String url, ProgressBar pb){
  3.         webView.loadUrl(url);
  4.         webView.addJavascriptInterface(new JsObject(KnowledgeVideoDetailAty4.this), "FULLSCREEN");
  5.         webView.setWebViewClient(new WebViewClient() {
  7.             @Override
  8.             public void onPageFinished(WebView view, String url) {
  9.                 view.loadUrl(BrowserJsInject.fullScreenByJs(url));
  11.             }
  13.         webView.setWebChromeClient(new WebViewClients());
  14.         //支持App内部javascript交互
  15.         webView.getSettings().setJavaScriptEnabled(true);
  16.         //自适应屏幕
  17.         webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
  18.         webView.getSettings().setLoadWithOverviewMode(true);
  19.         if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
  20.             webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
  21.         }
  22.     }
  23.     private class WebViewClients extends WebChromeClient {
  25.         @Override
  26.         public void onShowCustomView(View view, CustomViewCallback callback) {
  27.             setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
  29.             videoContainer.setVisibility(View.VISIBLE);
  31.             RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) video_view.getLayoutParams();
  32.             //修改布局中的height，width属性
  33.             //这里解释一下，因为你的手机横放过来了，所以，webview的高度其实是你手机的宽度，以此类推
  34.             params.width = height;
  35.             params.height = width;
  36. //重新设置修改后的布局给控件
  37.             view.setLayoutParams(params);
  39.             videoContainer.addView(view);
  40.             mCallBack=callback;
  41.             super.onShowCustomView(view, callback);
  42.         }
  44.         @Override
  45.         public void onHideCustomView() {
  46.             // 切换成竖屏
  47.             setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
  49.             RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) video_view.getLayoutParams();
  50.             //修改布局中的height，width属性
  51.             //这里解释一下，因为你的手机横放过来了，所以，webview的高度其实是你手机的宽度，以此类推
  52.             params.width = width;
  53.             params.height = videoHeight;
  54. //重新设置修改后的布局给控件
  55.             rl_video.setLayoutParams(params);
  56.             video_view.setLayoutParams(params);
  59.             if (mCallBack!=null){
  60.                 mCallBack.onCustomViewHidden();
  61.             }
  63.             videoContainer.removeAllViews();
  64.             videoContainer.setVisibility(View.GONE);
  65.             super.onHideCustomView();
  66.         }
  67.     }

发表评论

表情：
评论列表 （有 0 条评论，580人围观）

还没有评论，来说两句吧...

相关阅读