WebView 實現全屏播放視訊
最近要支援一個視訊挑戰的活動,要求 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); } } }