Comprehensive Solution for HTML5 Video Fullscreen Playback in Android WebView

Introduction

In mobile app development, WebView is commonly used to embed web content, but handling fullscreen playback of HTML5 videos often presents cross-version compatibility challenges for developers. Based on high-scoring answers from Stack Overflow, this article systematically analyzes the video playback mechanisms in Android WebView and provides a validated solution.

Analysis of Android WebView Video Playback Mechanisms

The Android system handles HTML5 <video> tags differently across versions. In Android 2.3.3 and below, WebView triggers fullscreen playback via the onShowCustomView method, returning a VideoView instance that allows direct access to MediaPlayer for event listening and control. However, in ICS (Android 4.0) and above, video playback is handled internally by WebView; onShowCustomView is called in fullscreen mode, but the view parameter becomes HTML5VideoFullScreen$VideoSurfaceView, a private inner class that lacks direct access to MediaPlayer, making it difficult for developers to listen for video end events or implement custom controls.

Reflection analysis of the HTML5VideoFullScreen class reveals that VideoSurfaceView does not hold a MediaPlayer instance, limiting traditional event listening approaches. Additionally, attempts to listen for video events via JavaScript interfaces may fail due to cross-origin issues when videos are nested in iframes, adding complexity to solutions.

Core Solution: VideoEnabledWebChromeClient and VideoEnabledWebView

To address these issues, we designed two generic classes: VideoEnabledWebChromeClient and VideoEnabledWebView. VideoEnabledWebChromeClient extends WebChromeClient and implements MediaPlayer event listener interfaces to handle the display and hiding of fullscreen videos. VideoEnabledWebView is a custom WebView that detects HTML5 video end events via a JavaScript interface and works in tandem with VideoEnabledWebChromeClient.

Key methods in VideoEnabledWebChromeClient include onShowCustomView and onHideCustomView. In onShowCustomView, different strategies are applied based on Android version and view type: for VideoView (API level <11), OnCompletionListener is set directly; for SurfaceView or TextureView (API level 11+), JavaScript code is injected to listen for video end events. JavaScript example: var _ytrp_html5_video = document.getElementsByTagName('video')[0]; _ytrp_html5_video.addEventListener('ended', function() { _VideoEnabledWebView.notifyVideoEnd(); }); This ensures fullscreen exit is triggered when the video ends.

VideoEnabledWebView provides the notifyVideoEnd method via a JavascriptInterface; when JavaScript detects the video end, it calls this method and notifies VideoEnabledWebChromeClient to execute onHideCustomView. Code example: public class JavascriptInterface { @android.webkit.JavascriptInterface public void notifyVideoEnd() { new Handler(Looper.getMainLooper()).post(new Runnable() { @Override public void run() { if (videoEnabledWebChromeClient != null) { videoEnabledWebChromeClient.onHideCustomView(); } } }); } }

Implementation Steps and Configuration Guidelines

First, enable hardware acceleration in AndroidManifest.xml: <application android:hardwareAccelerated="true"> This is crucial for fullscreen video playback on API level 11+. Then, define two ViewGroups in the layout file: one for non-fullscreen content (e.g., id=@+id/nonVideoLayout) and another for the fullscreen video container (e.g., id=@+id/videoLayout).

In the Activity, initialize VideoEnabledWebView and VideoEnabledWebChromeClient. Example code: webView = (VideoEnabledWebView) findViewById(R.id.webView); View nonVideoLayout = findViewById(R.id.nonVideoLayout); ViewGroup videoLayout = (ViewGroup) findViewById(R.id.videoLayout); webChromeClient = new VideoEnabledWebChromeClient(nonVideoLayout, videoLayout, null, webView); webView.setWebChromeClient(webChromeClient); Additionally, override the Activity's onBackPressed method to handle back key events in fullscreen mode: @Override public void onBackPressed() { if (!webChromeClient.onBackPressed()) { super.onBackPressed(); } }

Compatibility and Considerations

This solution has been tested on Android API levels 8 to 19 and optimized for the Chromium WebView in Android 4.4 KitKat. Key considerations include: JavaScript must be enabled, video tags should be unique to ensure accurate event listening, and avoid nesting videos in iframes to prevent DOM access issues. For API level 19+, due to internal changes in Chromium WebView, handle CustomViewCallback carefully to avoid crashes.

Supplementary Solution References

Other answers provide simplified implementations, such as handling fullscreen views directly via a custom WebChromeClient, but may lack cross-version compatibility. For example, a solution for Android 9.0 uses onShowCustomView and onHideCustomView to manage fullscreen without integrating JavaScript event listeners, suitable for simple scenarios. Developers can choose based on needs, but the complete solution in this article is recommended for optimal compatibility.

Conclusion

By combining VideoEnabledWebChromeClient and VideoEnabledWebView, we have implemented a reliable solution for HTML5 video fullscreen playback in Android WebView. This method addresses compatibility issues across Android versions, provides video end detection and fullscreen control, with open-source code that is easy to integrate. Future updates to Android WebView may require further adaptation, but the current solution offers a solid foundation for developers.