Android WebView全屏切换播放网页视频实现教程

"Android 使用 WebView 实现全屏切换播放网页视频功能" 在 Android 开发中，WebView 是一个非常重要的组件，它允许我们加载并显示网页内容。然而，当网页中包含视频元素时，如何实现全屏播放并进行屏幕方向切换是一项常见的需求。本教程将详细介绍如何通过 WebView 实现这一功能。 首先，我们需要创建一个基本的布局文件 `activity_main.xml`，该布局文件包括一个 FrameLayout（用于全屏显示视频）、一个 Button（用于横屏时切换全屏）以及一个 WebView（用于加载网页）。以下是布局文件的关键部分： ```xml <LinearLayout ... android:orientation="vertical"> <FrameLayout android:id="@+id/video_view" android:layout_width="fill_parent" android:layout_height="fill_parent" android:visibility="gone" /> <Button android:id="@+id/video_landport" ... android:gravity="center" /> <WebView android:id="@+id/video_webview" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout> ``` 实现全屏播放的原理是：当用户触发全屏操作时，将 WebView 中正在播放的视频移至 FrameLayout 中，并隐藏 WebView，从而达到全屏显示的效果。以下是关键的 Java 代码片段，假设在 `MainActivity.java` 中： ```java public class MainActivity extends Activity { private WebView webView; private FrameLayout videoView; private Button landPortBtn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = findViewById(R.id.video_webview); videoView = findViewById(R.id.video_view); landPortBtn = findViewById(R.id.video_landport); // 初始化 WebView 并加载网页 webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl("http://your.webpage.url"); // 设置 WebChromeClient 以处理视频事件 webView.setWebChromeClient(new WebChromeClient() { @Override public void onShowCustomView(View view, CustomViewCallback callback) { // 当视频需要全屏播放时，替换当前视图 if (view instanceof VideoView) { FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); videoView.addView(view, layoutParams); videoView.setVisibility(View.VISIBLE); webView.setVisibility(View.GONE); landPortBtn.setVisibility(View.GONE); view.setKeepScreenOn(true); // 保持屏幕常亮 customView = view; callback.onCustomViewHidden(); // 告诉 WebChromeClient 视图已被接管 } } @Override public void onHideCustomView() { // 当退出全屏时，恢复原状 if (customView != null) { videoView.removeView(customView); videoView.setVisibility(View.GONE); webView.setVisibility(View.VISIBLE); landPortBtn.setVisibility(View.VISIBLE); customView = null; } } }); } } ``` 这段代码中，我们首先初始化了 WebView 和 FrameLayout，接着设置了 WebChromeClient，这个客户端可以监听到网页中的视频播放事件。当视频需要全屏播放时，`onShowCustomView()` 方法会被调用，此时我们将 VideoView 添加到 FrameLayout 中，隐藏 WebView，并显示全屏视频。而当用户退出全屏模式时，`onHideCustomView()` 方法会回调，我们移除 VideoView 中的视图，恢复原本的界面布局。 此外，为了支持屏幕方向切换，你需要在 AndroidManifest.xml 文件中为对应的 Activity 添加以下属性： ```xml <activity android:name=".MainActivity" android:configChanges="orientation|screenSize" android:screenOrientation="sensor" /> ``` 这样，当设备旋转时，系统会自动处理布局变化，而不会重新创建 Activity，从而保持全屏状态。 通过监听 WebView 的视频事件，并结合 Android 的布局管理，我们可以实现在 Android 应用中使用 WebView 完成网页视频的全屏切换播放功能。这个过程涉及到对 WebChromeClient 的理解和对布局动态管理的掌握，是 Android 应用开发中的一个重要技能。