HTML5 Fullscreen Video Playback: From CSS Simulation to Fullscreen API Evolution

Introduction: The Technical Need for Fullscreen Playback

In web development, immersive video experiences have always been a crucial user experience goal. Early developers attempted to simulate fullscreen effects using CSS techniques, but this approach had fundamental limitations. The user's question reflects this technical pain point: even with width: 100%; height: 100%; settings, browser interfaces remain visible, preventing true immersive fullscreen experiences.

Limitations of CSS Simulation Methods

Before the Fullscreen API emerged, developers typically used CSS techniques to approximate fullscreen effects. A common approach involved fixed positioning and dimension adjustments:

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

While this method can make videos cover the entire viewport, it essentially creates a "pseudo-fullscreen" visual effect. Browser elements like address bars and toolbars remain visible, unable to provide true immersive experiences. Additionally, the z-index: -100 setting may cause videos to be overlapped by other page elements, affecting normal playback.

W3C Fullscreen API Standard Solution

To fundamentally address fullscreen playback issues, W3C developed the Fullscreen API specification. This API allows web applications to request specific elements (such as <video> or <canvas>) to switch to fullscreen mode, truly hiding browser interfaces.

Core API Methods

The core of Fullscreen API is the requestFullscreen() method. Here's a complete implementation example:

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

<script>
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { 
  elem.msRequestFullscreen();
}
</script>

Cross-Browser Compatibility Handling

Due to historical reasons, different browser vendors implemented Fullscreen API with varying prefixes. The compatibility handling pattern shown in the code represents best practices in actual development:

1. First attempt standard API: requestFullscreen()
2. Then handle Firefox prefix: mozRequestFullScreen()
3. Next handle WebKit-based browsers: webkitRequestFullscreen()
4. Finally handle legacy IE: msRequestFullscreen()

User Permissions and Security Mechanisms

The Fullscreen API was designed with security and user experience considerations. When calling the requestFullscreen() method:

• Browsers display permission request prompts requiring explicit user consent
• Fullscreen mode applies only to specific elements, not entire pages
• Users can exit fullscreen via ESC key or specific gestures
• Fullscreen automatically exits when pages lose focus

Technical Comparison and Evolutionary Significance

Comparing CSS simulation methods with Fullscreen API reveals fundamental differences:

Practical Application Recommendations

In actual development, the following strategies are recommended:

1. Prioritize Fullscreen API for genuine fullscreen experiences
2. Provide graceful fallback using CSS simulation for unsupported browsers
3. Add appropriate user prompts and transition animations during fullscreen switching
4. Handle fullscreen state change events like fullscreenchange and fullscreenerror

Conclusion

The technological evolution of HTML5 fullscreen video playback reflects the development trajectory of web standards. From early CSS simulations to standard Fullscreen API, this process not only addresses technical implementation issues but also elevates user experience standards for web applications. Developers should master the core usage of this API and apply it appropriately in practical projects to provide users with truly immersive video viewing experiences.