{"id":21721126,"url":"https://github.com/lulululbj/webviewvideodemo","last_synced_at":"2025-06-12T07:09:24.099Z","repository":{"id":98489527,"uuid":"82142798","full_name":"lulululbj/webviewvideodemo","owner":"lulululbj","description":"webview实现全屏播放的一种方式","archived":false,"fork":false,"pushed_at":"2017-02-16T05:35:44.000Z","size":91,"stargazers_count":19,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T21:36:20.600Z","etag":null,"topics":["fullscrren","webview"],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lulululbj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-02-16T05:27:05.000Z","updated_at":"2024-10-14T09:23:52.000Z","dependencies_parsed_at":"2023-06-28T07:15:49.263Z","dependency_job_id":null,"html_url":"https://github.com/lulululbj/webviewvideodemo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lulululbj/webviewvideodemo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lulululbj%2Fwebviewvideodemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lulululbj%2Fwebviewvideodemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lulululbj%2Fwebviewvideodemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lulululbj%2Fwebviewvideodemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lulululbj","download_url":"https://codeload.github.com/lulululbj/webviewvideodemo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lulululbj%2Fwebviewvideodemo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259418215,"owners_count":22854185,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fullscrren","webview"],"created_at":"2024-11-26T02:14:08.356Z","updated_at":"2025-06-12T07:09:24.088Z","avatar_url":"https://github.com/lulululbj.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# videodemo\nwebview实现全屏播放的一种方式\n\n　　用过WebView的开发者们肯定都知道这里面的坑数不胜数，加载缓慢，内存泄露，文件选择......没错，全屏播放视频，这又是一个大坑。一个没有修饰过的原生WebView几乎不可能在某一个主流视频网站实现全屏播放，倘若在客户端自己实现简单的播放器，链接拿过来，摆个VideoView，想怎么全屏怎么全屏，放在WebView上，一切就悲剧了，大多数情况下点击全屏按钮是没有反应的，或者无法实现横屏全屏。今天来介绍一种简单易行粗暴的方式来实现WebView的视频全屏播放。\n\n　　当你无从下手的时候，照例先看一下[官方文档](https://developer.android.com/reference/android/webkit/WebView.html)，很多常见的问题官方文档都给我们提供思路。你会发现下面这样一段话，\n\n![](http://upload-images.jianshu.io/upload_images/2466095-e4f037256adde6ef.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n　　应用如果需要支持HTML5的video标签，必须打开硬件加速。我们只需要在Application标签或者相应Activity标签下添加`android:hardwareAccelerated=\"true\"`即可。接着为了支持全屏，需要重写`WebChromeClient`的`onShowCustomView()`和`onHideCustomView()`方法，这两个方法缺一不可。先来看一下`onShowCustomView（）`:\n\n![](http://upload-images.jianshu.io/upload_images/2466095-1bc33530363160a0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n　　当前页面进入全屏模式的时候会调用这个方法，并且返回了两个参数。第一个是我们要在全屏模式时显示的View，第二个是一个CustomViewCallBack接口，可以调用这个接口请求关闭全屏模式。再看一下`onHideCustomView()`方法：\n\n![](http://upload-images.jianshu.io/upload_images/2466095-773bd024ee72825f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n　　通知应用当前页面已经关闭全屏模式，我们需要做的操作是隐藏之前`onSHowCustomView()`方法中取到的View。了解这两个方法之后，我们就可以进行一些操作来实现简单的全屏播放了。布局文件中我们增加一个和WebView同层级的Framelayout，如下所示：\n\n        \u003cWebView\n        android:id=\"@+id/webView\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"/\u003e\n\n        \u003cFrameLayout\n        android:id=\"@+id/videoContainer\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"/\u003e\n\n　　在Activity中实现自定义的WebChromeClient，在onShowCustomView中横屏，隐藏WebView,并将得到的View添加到FrameLayout中显示。在onHideCustomView中隐藏View，显示WebView，并竖屏，代码如下：\n\n    ` private class CustomWebViewChromeClient extends WebChromeClient{\n\n        @Override\n        public void onShowCustomView(View view, CustomViewCallback callback) {\n            fullScreen();\n            mWebView.setVisibility(View.GONE);\n            mVideoContainer.setVisibility(View.VISIBLE);\n            mVideoContainer.addView(view);\n            mCallBack=callback;\n            super.onShowCustomView(view, callback);\n        }\n\n        @Override\n        public void onHideCustomView() {\n            fullScreen();\n            if (mCallBack!=null){\n                mCallBack.onCustomViewHidden();\n            }\n            mWebView.setVisibility(View.VISIBLE);\n            mVideoContainer.removeAllViews();\n            mVideoContainer.setVisibility(View.GONE);\n            super.onHideCustomView();\n        }\n    }\n\n    private void fullScreen() {\n        if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {\n            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);\n        } else {\n            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);\n        }\n    }`\n\n　　最后别忘记处理屏幕旋转，否则横竖屏切换会重新走一遍生命周期。通过在一些主流视频网站上的测试，在爱奇艺，土豆，芒果TV，PPTV等可正常全屏，在腾讯，乐视，BiliBili,Acfun等网站仍然无法全屏。通过日志我们可以发现，根本没有回调onShowCustomView这个方法，所以没有执行相应代码。原因暂时还不得而知，有小伙伴了解的可以沟通一下。那么如何得到用户点击全屏按钮的事件呢，既然是一个html页面，java语言可以操作的东西就不多了，JavaScript就可以大显身手了。通过向页面注入一些js语句我们可以做很多事情，只需要知道全屏按钮的Class标识，就可以通过js，当用户点击全屏按钮的时候调用我们本地方法，具体代码如下：\n\n    \"javascript:document.getElementsByClassName('\" + tag + \"')[0].addEventListener('click',function(){onClick.fullscreen();return false;});\"\n\n　　tag是Class标识，onClick.fullscreen()是我自己本地定义的方法。那么如何注入这段js代码呢？我们只需要重写WebClient的`onPageFinished()`方法，如下所示：\n\n    private class CustomWebClient extends WebViewClient{\n\n        @Override\n        public void onPageFinished(WebView view, String url) {\n            super.onPageFinished(view, url);\n            String js=TagUtils.getJs(url);\n            view.loadUrl(js);\n        }\n    }\n\n    private class JsObject{\n\n        @JavascriptInterface\n        public void fullscreen(){\n            //监听到用户点击全屏按钮\n           fullScreen();\n        }\n    }\n\n    mWebView.addJavascriptInterface(new JsObject(),\"onClick\");\n\n　　这样就可以实现上述几个网站的全屏播放了。\n   经测试，腾讯和BiliBili没有问题了，乐视和Acfun仍然不可以全屏，即使已经找到了全屏按钮的Class标识。哪位大仙可以提供一个解释。\n   下面给出一些我收集的几个视频网站的全屏按钮Class标识：\n\n    public static String getTagByUrl(String url) {\n        if (url.contains(\"qq\")) {\n            return \"tvp_fullscreen_button\"; // http://m.v.qq.com\n        } else if (url.contains(\"youku\")) {\n            return \"x-zoomin\";              // http://www.youku.com\n        } else if (url.contains(\"bilibili\")) {\n            return \"icon-widescreen\";       // http://www.bilibili.com/mobile/index.html\n        } else if (url.contains(\"acfun\")) {\n            return \"controller-btn-fullscreen\"; //http://m.acfun.tv   无效\n        } else if (url.contains(\"le\")) {\n            return \"hv_ico_screen\";         // http://m.le.com  无效\n        }\n        return \"\";\n    }\n\n　　总结一下，正如文章题目所说，实现WebView全屏播放的一种方式，而且肯定不是主流的一种方式，仅仅只是一种比较简单的方式。通过反编译一些浏览器应用的apk，大多数是通过js获取到当前页面视频的链接，用自定义的播放器来播放，这样使得播放界面可以自定义，用户体验更好，当然，我也想过这种方法，可是已经跪在起点，如何获得当前页面视频的播放地址。研究过的同学可以和我交流交流，不胜感激。\n\n\n\n\u003e 有任何疑问，欢迎加群讨论：261386924\n\n　　\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flulululbj%2Fwebviewvideodemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flulululbj%2Fwebviewvideodemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flulululbj%2Fwebviewvideodemo/lists"}