Android WebView全屏播放视频实现及源码解析

"Android编程实现WebView全屏播放的方法，通过附带的源码展示了如何在Android应用中让WebView内的HTML5视频实现全屏播放。主要涉及WebView、布局设计以及横屏切换功能。" 在Android应用开发中，有时我们需要在WebView中加载包含HTML5视频的内容，并且需要提供全屏播放的功能。以下将详细介绍如何实现这一目标： 首先，我们来看一下关键的布局文件`activity_main.xml`。布局文件中包含了一个`LinearLayout`作为容器，里面有两个子视图：一个`FrameLayout`用于全屏播放视频，一个`WebView`用于展示网页内容，还有一个`Button`用于触发全屏模式。 ```xml <LinearLayout android:id="@+id/container" android:layout_width="fill_parent" android:layout_height="fill_parent" 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:layout_width="fill_parent" android:layout_height="wrap_content" android:text="全屏不显示该按钮，点击切换横屏" android:gravity="center" /> <WebView android:id="@+id/video_webview" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout> ``` 在这个布局中，`FrameLayout`用于在全屏时显示视频，初始设置为不可见(`android:visibility="gone"`)，当用户触发全屏时将其变为可见。`WebView`是页面内容的承载者，而`Button`用于控制全屏状态。 接下来，我们需要在`WebView`的设置中允许播放视频，并监听视频播放事件。这通常在`WebViewClient`的回调中完成。在`onPageFinished()`方法中，可以注入JavaScript代码来获取HTML5视频元素，并添加全屏播放的监听。 ```java webView.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); // 注入JavaScript代码，获取video标签并添加全屏事件监听 webView.loadUrl("javascript:(function() {" + "var videos = document.getElementsByTagName('video');" + "for (var i = 0; i < videos.length; i++) {" + "videos[i].addEventListener('webkitfullscreenchange', function(e) {" + "if (document.webkitIsFullScreen) {" + "document.getElementById('video_view').setVisibility(View.VISIBLE);" + "} else {" + "document.getElementById('video_view').setVisibility(View.GONE);" + "}" + "});" + "}" + "})()"); } }); ``` 同时，为了实现横屏播放，我们需要在`AndroidManifest.xml`中对当前Activity设置`android:configChanges="orientation|screenSize"`，这样在屏幕方向改变时，我们可以手动处理布局变化。 在Activity中重写`onConfigurationChanged()`方法，根据屏幕方向来调整`FrameLayout`和`WebView`的大小，以便在横屏时全屏显示视频。 ```java @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) { // 横屏状态下，隐藏WebView并显示全屏视频 webView.setVisibility(View.GONE); videoView.setVisibility(View.VISIBLE); // 这里可以调整FrameLayout的宽高以适应横屏 } else { // 竖屏状态下，恢复WebView显示，隐藏全屏视频 webView.setVisibility(View.VISIBLE); videoView.setVisibility(View.GONE); // 这里可以调整FrameLayout的宽高以适应竖屏 } } ``` 最后，为了让用户可以手动触发全屏，我们在`Button`的点击事件中切换横竖屏状态。这可以通过调用`setRequestedOrientation()`方法实现。 ```java button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) { setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); } else { setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); } } }); ``` 通过以上步骤，我们成功地在Android应用中实现了WebView内HTML5视频的全屏播放功能。在用户点击全屏按钮或视频本身全屏按钮时，视频会自动切换到全屏模式，而在非全屏状态下，视频将返回到WebView中正常播放。这种实现方式既考虑了用户交互，又充分利用了设备屏幕空间。