重庆梁平网站建设费用,seo网站营销推广,最大的推广平台,WordPress图片加密去年双十一有个直播的需求#xff0c;听起来很简单#xff0c;技术也都很成熟#xff0c;但是真的开始实现后#xff0c;还是有不少坑的#xff0c;首先第一个uc内核不支持webRTC协议#xff0c;需要重新开发chrome内核的webview#xff0c;其次webview全屏处理、悬浮窗…去年双十一有个直播的需求听起来很简单技术也都很成熟但是真的开始实现后还是有不少坑的首先第一个uc内核不支持webRTC协议需要重新开发chrome内核的webview其次webview全屏处理、悬浮窗恢复同步、输入框被被输入法遮盖等问题都是坑小子挨个踩过查阅很多前辈资料把能够即插即用的部分整理出来以资来者。
原理
H5在调用系统全屏和恢复接口时会触发WebChromeClient的onShowCustomView(View, CustomViewCallback)和onHideCustomView()接口所以只要在两个方法中分别实现横竖屏切换和全屏展示和隐藏即可。
其中需要注意的 1、在onShowCustomView()中有个入参CustomViewCallback这回调需要在全屏恢复时调用以告知H5解决全屏展示。
2、布局中增加一个充满屏幕的控件用以承载全屏的展示。
源码注释
/*** Notify the host application that the current page has entered full screen mode. After this* call, web content will no longer be rendered in the WebView, but will instead be rendered* in {code view}. The host application should add this View to a Window which is configured* with {link android.view.WindowManager.LayoutParams#FLAG_FULLSCREEN} flag in order to* actually display this web content full screen.** pThe application may explicitly exit fullscreen mode by invoking {code callback} (ex. when* the user presses the back button). However, this is generally not necessary as the web page* will often show its own UI to close out of fullscreen. Regardless of how the WebView exits* fullscreen mode, WebView will invoke {link #onHideCustomView()}, signaling for the* application to remove the custom View.** pIf this method is not overridden, WebView will report to the web page it does not support* fullscreen mode and will not honor the web pages request to run in fullscreen mode.** p classnotebNote:/b if overriding this method, the application must also override* {link #onHideCustomView()}.** param view is the View object to be shown.* param callback invoke this callback to request the page to exit* full screen mode.*/
public void onShowCustomView(View view, CustomViewCallback callback) {};Google源码的注释写的确实清楚这个方法就是做了一件事儿 更改渲染对象新对象通过view传给原生。
但在调用时需要注意
宿主APP要配置全屏属性在关闭全屏时记得调用#onHideCustomView#onCustomViewHidden()
实现
布局
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentWebViewandroid:idid/float_webviewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent /FrameLayoutandroid:idid/float_frameLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent/FrameLayout
/LinearLayoutJava实现
private void setWebView(){mWebChromeClient new WebChromeClient() {Overridepublic void onShowCustomView(View view, CustomViewCallback callback) {super.onShowCustomView(view, callback);if (mCustomView ! null) {callback.onCustomViewHidden(); // 通知H5全屏关闭return;}mCustomView view; // 缓存全屏视图mFrameLayout.addView(mCustomView); // 向全屏控件添加全屏视图mCustomViewCallback callback;mWebview.setVisibility(View.GONE); // 将已有webview控件隐藏setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); // 切换横屏}Overridepublic void onHideCustomView() {webview.setVisibility(View.VISIBLE);if (mCustomView null) {return;}mCustomView.setVisibility(View.GONE);mFrameLayout.removeView(mCustomView);mCustomViewCallback.onCustomViewHidden(); // 通知H5全屏关闭mCustomView null;setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); // 切换竖屏super.onHideCustomView();}};mWebview.setWebChromeClient(mWebChromeClient);
}参考
Android WebView 全屏播放视频
