android x5全屏白色,x5webview 自定义全屏界面(示例代码)

集成X5WEBVIEW可以选择全屏模式为标准全屏还是x5全屏，而不设置默认为false。

首先看看标准全屏的基本设置，

if (webView.getX5WebViewExtension() != null) {

Bundle data= newBundle();

data.putBoolean("standardFullScreen", false);//true表示标准全屏，false表示X5全屏；不设置默认false，

data.putBoolean("supportLiteWnd", false);//false：关闭小窗；true：开启小窗；不设置默认true，

data.putInt("DefaultVideoScreen", 1);//1：以页面内开始播放，2：以全屏开始播放；不设置默认：1

webView.getX5WebViewExtension().invokeMiscMethod("setVideoParams", data);

}

如果使用的是标准全屏那么，显示页面如下：

可以看到典型的 可以横竖屏切换的按钮，锁屏的按钮，缓存和分享的按钮以及视频名标题。 这些内容在一些场景下是可能不希望看到显示的，比如缓存按钮，比如使用模板打开的页面分享出来是模板地址。

因此需要一种标准的全屏模式，而非x5全屏模式。

使用标准全屏模式代码如下：

if (webView.getX5WebViewExtension() != null) {

Bundle data= newBundle();

data.putBoolean("standardFullScreen", true);//true表示标准全屏，false表示X5全屏；不设置默认false，

data.putBoolean("supportLiteWnd", false);//false：关闭小窗；true：开启小窗；不设置默认true，

data.putInt("DefaultVideoScreen", 1);//1：以页面内开始播放，2：以全屏开始播放；不设置默认：1

webView.getX5WebViewExtension().invokeMiscMethod("setVideoParams", data);

}

需要在内部处理全屏的交互，在布局中增加代码如下：

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/webViewLayout"

android:orientation="vertical">

android:id="@+id/video_fullView"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="@color/black"android:visibility="gone">

android:id="@+id/tv_touch"android:layout_width="150dp"android:layout_height="45dp"android:layout_gravity="right"android:layout_marginTop="20dp"android:background="@color/transparent" />

首先添加 一个webviewChromeClient，处理onShowCustomView、onHideCustomView两个方法的回调。在类中添加如下代码

privateIX5WebChromeClient.CustomViewCallback xCustomViewCallback;private FrameLayout video_fullView;//全屏时视频加载view

privateView xCustomView;private com.tencent.smtt.sdk.WebChromeClient xwebchromeclient = newcom.tencent.smtt.sdk.WebChromeClient() {

@Overridepublic void onProgressChanged(com.tencent.smtt.sdk.WebView webView, intpercent) {super.onProgressChanged(webView, percent);if (percent > 40) {

webView.setVisibility(View.VISIBLE);

}

}//拦截全屏调用的方法

@Overridepublic voidonShowCustomView(View view, IX5WebChromeClient.CustomViewCallback callback) {super.onShowCustomView(view, callback);

getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

Log.e("my","onShowCustomView----xCustomView:" +xCustomView);

webView.setVisibility(View.INVISIBLE);//如果一个视图已经存在，那么立刻终止并新建一个

if (xCustomView != null) {

callback.onCustomViewHidden();return;

}view.setVisibility(View.VISIBLE);

video_fullView.addView(view);

xCustomView =view;

xCustomView.setVisibility(View.VISIBLE);

xCustomViewCallback=callback;

video_fullView.setVisibility(View.VISIBLE);

}

@Overridepublic voidonHideCustomView() {super.onHideCustomView();

Log.e("my","onHideCustomView----xCustomView:" +xCustomView);if (xCustomView == null){//不是全屏播放状态

return;

}

getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

xCustomView.setVisibility(View.GONE);

video_fullView.removeView(xCustomView);

xCustomView= null;

video_fullView.setVisibility(View.GONE);

xCustomViewCallback.onCustomViewHidden();

webView.setVisibility(View.VISIBLE);

}

};/*** 判断是否是全屏

*

*@return

*/

public booleaninCustomView() {return (xCustomView != null);

}/*** 全屏时按返加键执行退出全屏方法*/

public voidhideCustomView() {

xwebchromeclient.onHideCustomView();

getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

}

设置x5webview的webchrome，代码如下：

webView.setWebChromeClient(xwebchromeclient);

为了处理返回事件，还需要加上如下代码：

@Overridepublic boolean onKeyDown(intkeyCode, KeyEvent event) {if (inCustomView() && keyCode ==KeyEvent.KEYCODE_BACK) {

hideCustomView();return;

}return super.onKeyDown(keyCode, event);

}

这样就大功告成。