今天在公司的APP中嵌套网页，使用的是安卓原生webview，发现一个问题，就是在碰到有视频的界面，播放视频的时候发现全屏按钮是灰色的，点击的时候没有任何反应，也是上网搜集资料，最后完美解决，再次记录一下解决过程，以免重复踩坑，同时也给各位同行小伙帮提供一种解决思路。
一、首先呢我们来解决全屏按钮点击失效的问题；
查了一下资料，文档上写着支持视频播放的条件：
通过翻译了解到，大概意思就是；
1、要打开硬件加速
2、设置 WebChromeClient ,并实现 onShowCustomView() 方法和onHideCustomView()方法。
3、要支持全屏
接下来就是解决问题：
1、首先开启硬件加速
在AndroidMainfest.xml中，当前webView所在类的标签中添加 : android:hardwareAccelerated="true"
android:name="..."
android:hardwareAccelerated="true"/>
2、设置 WebChromeClient
我们添加一个内部类，实现 WebChromeClient, 并复写其中的方法
private class MyWebChromeClient extends WebChromeClient {
// 全屏的时候调用
@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
super.onShowCustomView(view, callback);
}
// 切换为竖屏的时候调用
@Override
public void onHideCustomView() {
super.onHideCustomView();
}
}
写到这里全屏按钮就已经显示出来了。当然，我们我们还要设置一下WebView 的相关属性
/**
* 设置webView 相关属性
* */
privatevoidinitWebView(){
webview = (WebView) findViewById(R.id.webview);
webview.getSettings().setJavaScriptEnabled(true);// 设置支持javascript脚本
webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);//设置webview缓存模式
webview.setVerticalScrollBarEnabled(false);// 取消Vertical ScrollBar显示
webview.setHorizontalScrollBarEnabled(false);// 取消Horizontal ScrollBar显示
//设置自适应屏幕，两者合用
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setAllowFileAccess(true);// 允许访问文件
webview.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
webview.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
webview.setFocusable(false);// 去掉超链接的外边框
webview.getSettings().setDefaultTextEncodingName("GBK");//设置文本编码（根据页面要求设置： utf-8）
webview.setWebChromeClient(newMyWebChromeClient());
}
然后看一下效果：
至此全屏按钮失效的问题已经得到了解决，接下来在让我们看看另外一个问题
二、设置全屏后，视频不能播放
全屏按钮出来后，点击全屏，会调用 onShowCustomView() 方法。我们在这个方法中设置横屏的方法，即可实现全屏
//设置横屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
但是我设置后，发现无法播放视频，只显示一个黑页面
查了下相关资料后，发现
public void onShowCustomView(View view, CustomViewCallback callback)
这个方法，在设置全屏后 会在参数 view 上显示播放的视频。所以，当设置全屏后，需要让这个view显示到最前方。
解决：我们可以在布局文件中，添加一个和webview 同级的 Framlaoyout ，用来存放这个视图
xml 文件：
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/fl_video"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"/>
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout >
WebChromeClient 具体实现
publicclassHelpActivityextendsTitleBarActivity{
privateWebView webview =null;
// h5 地址
privateString reurl ="";
// 用来显示视频的布局
privateFrameLayout mLayout;
publicvoidonCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);
mLayout = (FrameLayout) findViewById(R.id.fl_video);
webview = (WebView) findViewById(R.id.webview);
inieWebView();
}
/**
* 设置webView 相关属性
*/
privatevoidinitWebView(){
WebSettings setting= webview.getSettings();
setting.setJavaScriptEnabled(true);// 设置支持javascript脚本
setting.setCacheMode(WebSettings.LOAD_NO_CACHE);//设置缓存模式
webview.setVerticalScrollBarEnabled(false);// 取消Vertical ScrollBar显示
webview.setHorizontalScrollBarEnabled(false);// 取消Horizontal ScrollBar显示
//设置自适应屏幕，两者合用
setting.setUseWideViewPort(true);
setting.setLoadWithOverviewMode(true);
setting.setAllowFileAccess(true);// 允许访问文件
setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
setting.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
webview.setFocusable(false);// 去掉超链接的外边框
setting.setDefaultTextEncodingName("GBK");//设置文本编码（根据页面要求设置）
webview.setWebChromeClient(newMyWebChromeClient());
}
privateclassMyWebChromeClientextendsWebChromeClient{
privateCustomViewCallback mCustomViewCallback;
// 横屏时，显示视频的view
privateView mCustomView;
// 点击全屏按钮时，调用的方法
@Override
publicvoidonShowCustomView(View view, CustomViewCallback callback){
super.onShowCustomView(view, callback);
//如果view 已经存在，则隐藏
if(mCustomView !=null) {
callback.onCustomViewHidden();
return;
}
mCustomView = view;
mCustomView.setVisibility(View.VISIBLE);
mCustomViewCallback = callback;
mLayout.addView(mCustomView);
mLayout.setVisibility(View.VISIBLE);
mLayout.bringToFront();
//设置横屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
}
// 取消全屏调用的方法
@Override
publicvoidonHideCustomView(){
super.onHideCustomView();
if(mCustomView ==null) {
return;
}
mCustomView.setVisibility(View.GONE);
mLayout.removeView(mCustomView);
mCustomView =null;
mLayout.setVisibility(View.GONE);
try{
mCustomViewCallback.onCustomViewHidden();
}catch(Exception e) {
}
titleView.setVisibility(View.VISIBLE);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//竖屏
}
}
/**
* 横竖屏切换监听
*/
@Override
publicvoidonConfigurationChanged(Configuration config){
super.onConfigurationChanged(config);
switch(config.orientation) {
caseConfiguration.ORIENTATION_LANDSCAPE:
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
break;
caseConfiguration.ORIENTATION_PORTRAIT:
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
break;
}
}
@Override
protectedvoidonDestroy(){
super.onDestroy();
webview.destroy();
webview =null;
}
}
还需要在 AndroidMainfest.xml 中设置该 Activity相关属性，即横竖屏切换的时候，不进行生命周期的切换
android:name=".HelpActivity"
android:configChanges="orientation|keyboardHidden|navigation|screenSize"
android:hardwareAccelerated="true"
android:screenOrientation="portrait"
/>
到这里就大功告成！
还有一点需要注意： 当我们播放视频后，如果直接退出，会发现后台仍然在播放。
我们可以在 onDestory 方法中，对webView进行销毁
本文参考博客：https://blog.csdn.net/lijia1201900857/article/details/83413530
网友评论