android webview 横竖屏_WebView实现全屏播放的一种方法
用过WebView的开发者们肯定都知道这里面的坑数不胜数,加载缓慢,内存泄露,文件选择......没错,全屏播放视频,这又是一个大坑。一个没有修饰过的原生WebView几乎不可能在某一个主流视频网站实现全屏播放,倘若在客户端自己实现简单的播放器,链接拿过来,摆个VideoView,想怎么全屏怎么全屏,放在WebView上,一切就悲剧了,大多数情况下点击全屏按钮是没有反应的,或者无法实现横屏全屏。今天来介绍一种简单易行粗暴的方式来实现WebView的视频全屏播放。
当你无从下手的时候,照例先看一下官方文档,很多常见的问题官方文档都给我们提供思路。你会发现下面这样一段话,
应用如果需要支持HTML5的video标签,必须打开硬件加速。我们只需要在Application标签或者相应Activity标签下添加android:hardwareAccelerated="true"即可。接着为了支持全屏,需要重写WebChromeClient的onShowCustomView()和onHideCustomView()方法,这两个方法缺一不可。先来看一下onShowCustomView():
当前页面进入全屏模式的时候会调用这个方法,并且返回了两个参数。第一个是我们要在全屏模式时显示的View,第二个是一个CustomViewCallBack接口,可以调用这个接口请求关闭全屏模式。再看一下onHideCustomView()方法:
通知应用当前页面已经关闭全屏模式,我们需要做的操作是隐藏之前onSHowCustomView()方法中取到的View。了解这两个方法之后,我们就可以进行一些操作来实现简单的全屏播放了。布局文件中我们增加一个和WebView同层级的Framelayout,如下所示:
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
android:id="@+id/videoContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
在Activity中实现自定义的WebChromeClient,在onShowCustomView中横屏,隐藏WebView,并将得到的View添加到FrameLayout中显示。在onHideCustomView中隐藏View,显示WebView,并竖屏,代码如下:
` private class CustomWebViewChromeClient extends WebChromeClient{
@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
fullScreen();
mWebView.setVisibility(View.GONE);
mVideoContainer.setVisibility(View.VISIBLE);
mVideoContainer.addView(view);
mCallBack=callback;
super.onShowCustomView(view, callback);
}
@Override
public void onHideCustomView() {
fullScreen();
if (mCallBack!=null){
mCallBack.onCustomViewHidden();
}
mWebView.setVisibility(View.VISIBLE);
mVideoContainer.removeAllViews();
mVideoContainer.setVisibility(View.GONE);
super.onHideCustomView();
}
}
private void fullScreen() {
if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
} else {
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}
}`
最后别忘记处理屏幕旋转,否则横竖屏切换会重新走一遍生命周期。通过在一些主流视频网站上的测试,在爱奇艺,土豆,芒果TV,PPTV等可正常全屏,在腾讯,乐视,BiliBili,Acfun等网站仍然无法全屏。通过日志我们可以发现,根本没有回调onShowCustomView这个方法,所以没有执行相应代码。原因暂时还不得而知,有小伙伴了解的可以沟通一下。那么如何得到用户点击全屏按钮的事件呢,既然是一个html页面,java语言可以操作的东西就不多了,JavaScript就可以大显身手了。通过向页面注入一些js语句我们可以做很多事情,只需要知道全屏按钮的Class标识,就可以通过js,当用户点击全屏按钮的时候调用我们本地方法,具体代码如下:
"javascript:document.getElementsByClassName('" + tag + "')[0].addEventListener('click',function(){onClick.fullscreen();return false;});"
tag是Class标识,onClick.fullscreen()是我自己本地定义的方法。那么如何注入这段js代码呢?我们只需要重写WebClient的onPageFinished()方法,如下所示:
private class CustomWebClient extends WebViewClient{
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
String js=TagUtils.getJs(url);
view.loadUrl(js);
}
}
private class JsObject{
@JavascriptInterface
public void fullscreen(){
//监听到用户点击全屏按钮
fullScreen();
}
}
mWebView.addJavascriptInterface(new JsObject(),"onClick");
这样就可以实现上述几个网站的全屏播放了。
经测试,腾讯和BiliBili没有问题了,乐视和Acfun仍然不可以全屏,即使已经找到了全屏按钮的Class标识。哪位大仙可以提供一个解释。
下面给出一些我收集的几个视频网站的全屏按钮Class标识:
public static String getTagByUrl(String url) {
if (url.contains("qq")) {
return "tvp_fullscreen_button"; // http://m.v.qq.com
} else if (url.contains("youku")) {
return "x-zoomin"; // http://www.youku.com
} else if (url.contains("bilibili")) {
return "icon-widescreen"; // http://www.bilibili.com/mobile/index.html
} else if (url.contains("acfun")) {
return "controller-btn-fullscreen"; //http://m.acfun.tv 无效
} else if (url.contains("le")) {
return "hv_ico_screen"; // http://m.le.com 无效
}
return "";
}
总结一下,正如文章题目所说,实现WebView全屏播放的一种方式,而且肯定不是主流的一种方式,仅仅只是一种比较简单的方式。通过反编译一些浏览器应用的apk,大多数是通过js获取到当前页面视频的链接,用自定义的播放器来播放,这样使得播放界面可以自定义,用户体验更好,当然,我也想过这种方法,可是已经跪在起点,如何获得当前页面视频的播放地址。研究过的同学可以和我交流交流,不胜感激。
有任何疑问,欢迎加群讨论:261386924
android webview 横竖屏_WebView实现全屏播放的一种方法相关推荐
- android 全屏动画,Android开发之全屏与非全屏的切换设置方法小结
本文实例讲述了Android开发之全屏与非全屏的切换设置方法.分享给大家供大家参考,具体如下: 静态方法 1. 代码方式 在Activity类OnCreate方法中设置,代码如下 @Override ...
- android中布局全屏,怎么在Android 应用中实现一个全屏与非全屏功能
怎么在Android 应用中实现一个全屏与非全屏功能 发布时间:2020-12-04 17:31:45 来源:亿速云 阅读:135 作者:Leah 怎么在Android 应用中实现一个全屏与非全屏功能 ...
- android 代码设置dialog 全屏,Android里把Dialog设置为全屏的方法
Android里把Dialog设置为全屏的方法 有的时候我们需要把Dialog设置为全屏,于是我们想到了如下的办法: //设置成全屏 LinearLayout.LayoutParams p = new ...
- android动态设置全屏,Android开发之全屏与非全屏的切换设置方法小结
本文实例讲述了Android开发之全屏与非全屏的切换设置方法.分享给大家供大家参考,具体如下: 静态方法 1. 代码方式 在Activity类OnCreate方法中设置,代码如下 @Override ...
- Android 点击图片放大至全屏 再次点击关闭过度动画 Shared Element效果(共享元素效果)
Android 点击图片放大至全屏 再次点击关闭过度动画 最近项目需要给用户一个体验优化,各种查阅,然后改了很多地方,类似于图片的点击预览,消息列表的点击流畅过渡. Shared Element效果( ...
- android 点击图片动画效果,Android仿微信图片点击全屏效果
废话不多说,先看下Android图片点击全屏效果: 先是微信的 再是模仿的 先说下实现原理,再一步步分析 这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Inten ...
- 一加android8稳定版,一加5T获Android 8.1稳定版升级 全屏手势代替虚拟按键
原标题:一加5T获Android 8.1稳定版升级 全屏手势代替虚拟按键 虽然一加手机的新旗舰一加6即将发布,但是官方也没有忘记老用户.5月9日夜间,一加5T迎来了稳定版固件更新,除了核心升级为And ...
- android全屏与非全屏切换时Toolbar的显示,仿微信漂流瓶效果
Toolbar已经代替了actionbar,特别是在4.4或更高版本上可以有沉浸式效果,要使用Toolbar还要配置相关的Noactionbar style样式,但是如果在全屏与非全屏切换时,如何使用 ...
- Android隐藏底部虚拟按键并全屏
Android隐藏底部虚拟按键并全屏 Java View decorView = getWindow().getDecorView();// Hide both the navigation bar ...
最新文章
- 如何把主机系统上传到服务器,主机系统上传到服务器
- 金陵科技学院c语言测试,金陵科技学院C语言实验册.doc
- dlink打印服务器重置,单口打印服务器 D-Link DP-302简析
- 工业用微型计算机笔记(4)~编码,寄存器,引脚
- Spring Boot 开发web 项目
- Page9:结构分解以及系统内部稳定和BIBO稳定概念及其性质[Linear System Theory]
- 2021中国出口跨境电商发展研究报告
- 华硕飞马3S,日常使用续航测试
- 今天中午过的不爽的原因分析
- html文件元素体,文档表示HTML文件,文档中的______________被称为元素
- XML Schema 配置文件自动生成c#类设计案例子
- Delphi之TStrings和TStringLists类【转】
- tableau 官方手册 (中文版 pdf)
- 单片机支持EM4100和T5577两种ID门禁卡
- 51单片机彩灯控制器的设计(含源代码、编译过的 HEX 文件以及仿真图)
- 深入解读5G关键技术
- java 正则校验经纬度格式
- 阿里云短信发送接口直接HTTP请求调用
- 路由-策略Policy(路由重分发、路由过滤、路由策略)
- LeetCode题解(1628):设计带解析函数的表达式树(Python)