MDN: The full-screen API provides an easy way to present Web content using a user’s entire screen. This API lets you simply control the browser so that one element and its children, if they exist, can take up the entire screen and, in the meantime, hide all of the browser user interface and other applications from the screen.

An overview of

  • document.fullscreen
  • document.fullscreenElement
  • document.fullscreenEnabled
  • elem.requestFullscreen
  • document.exitFullscreen
  • document.onfullscreenchange
  • document.onfullscreenerror

attribute

document.fullscreen

Checks whether the current document is in full-screen mode and returns a Boolean value

document.fullscreenElement

The element currently active in full screen mode

document.fullscreenEnabled

Whether the current document supports full screen

methods

Request full screen mode

A full-screen request should be made by a specific element, in the case of the video element, as follows:

<video controls id="video">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>
Copy the code
var elem = document.getElementById("video");
elem.addEventListener('click'.function () {
	if(elem.requestFullscreen) { elem.requestFullscreen(); }});Copy the code

MDN: A full-screen request must be invoked in an event handler or it will be rejected.

Exit the full-screen mode

  • Method 1: PressESC 或 F11Key to exit the full screen
  • Method 2:[keydown event] + document.exitFullscreenCustom full-screen exit logic
// Press Enter to exit full screen
document.addEventListener("keydown".function(e) {
  if (e.keyCode == 13) {
    document.exitFullscreen(); }},false);
Copy the code

Note that the exitFullscreen method only exists on the Document object, not elem

The event

onfullscreenchange

The onFullScreenchange event triggers two moments: one is when the fullscreen enters, the other is when the fullscreen exits. This means that the onFullScreenChange event will be triggered if the state of the fullscreen mode changes

document.onfullscreenchange = function ( event ) {
  console.log("Full screen mode status changed");
};
Copy the code

onfullscreenerror

An error occurs when you try to request fullscreen on an element that does not support fullscreen mode, and this error raises the onFullScreenError event

document.onfullscreenerror = function ( event ) { 
  console.log("Full screen mode failed");
};
Copy the code

The easiest way to verify the onFullScreenError event is to make a full-screen request outside of the event listener. Because ** full-screen requests must be called in event handlers, otherwise they will be rejected. ** Reject an error that raises the onFullScreenError event

document.onfullscreenerror = function ( event ) { 
  console.log("Full screen mode failed");
}; 

RequestFullscreen () will fail because it is outside the event handler
document.documentElement.requestFullscreen();
Copy the code

Full screen style

Gecko automatically adds additional styles for elements that enter full-screen mode: width: 100%; height: 100%l; , the purpose is to spread it all over the screen; Webkit doesn’t have this default behavior, so you need to manually add this style

#video:-webkit-full-screen {
  width: 100%;
  height: 100%;
}
Copy the code

Compatible with

PC

The mobile terminal

The prefix

Table 1

Table 2.

conclusion

Most of this article refers to the MDN documentation for the purpose of organizing Web full-screen apis, not original articles

The original address: www.guoyunfeng.com/2018/08/15/…