WebView 實現全屏播放視訊

摘要： 最近要支援一個視訊挑戰的活動，要求 WebView 能全屏播放視訊，現在把 Android 端實現的方法分享給大家。 要實現全屏需要給 WebView 設定WebChromeClient 並覆寫onShowCustomView 和onHideC...

最近要支援一個視訊挑戰的活動，要求 WebView 能全屏播放視訊，現在把 Android 端實現的方法分享給大家。

要實現全屏需要給 WebView 設定WebChromeClient 並覆寫onShowCustomView 和onHideCustomView() 兩方法：

webView.setWebChromeClient(new WebChromeClient() {

@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
// 此處的 view 就是全屏的視訊播放介面，需要把它新增到我們的介面上
}

@Override
public void onHideCustomView() {
// 退出全屏播放，我們要把之前新增到介面上的視訊播放介面移除
}
});

為了實現全屏的效果，需要將視訊介面新增我們介面的最上層，有兩種方式，一種是新增到ContentView 中，核心程式碼如下:

contentParentView = findViewById(android.R.id.content);

webView.setWebChromeClient(new WebChromeClient() {

@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
contentParentView.addView(view);
}

@Override
public void onHideCustomView() {
contentParentView.removeView(fullScreenView);
}
});

另一種是新增到WindowManager 中，完整程式碼如下：

public class WebActivity extends AppCompatActivity {

...

private WindowManager windowManager;
private View fullScreenView = null;

@Override
protected void onResume() {
super.onResume();
// 如果之前處於全屏狀態，重新進入後需要再次呼叫全屏
if (fullScreenView != null) fullScreen(fullScreenView);
}

@Override
public void onBackPressed() {
// 全屏狀態點選返回退出全屏
if (fullScreenView != null) {
windowManager.removeViewImmediate(fullScreenView);
fullScreenView = null;
} else {
super.onBackPressed();
}
}

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_webview);
windowManager = getWindowManager();

webView.setWebChromeClient(new WebChromeClient() {

@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
// 此處的 view 就是全屏的視訊播放介面，需要把它新增到我們的介面上
windowManager.addView(view, new WindowManager.LayoutParams(WindowManager.LayoutParams.TYPE_APPLICATION));
// 去除狀態列和導航按鈕
fullScreen(view);
fullScreenView = view;
}

@Override
public void onHideCustomView() {
// 退出全屏播放，我們要把之前新增到介面上的視訊播放介面移除
windowManager.removeViewImmediate(fullScreenView);
fullScreenView = null;
}
});
}

private void fullScreen(View view) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
view.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE
| View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
} else {
view.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE
| View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
}
}
}