HTML5 full screen features

HTML5 now supports the full screen feature. The fullscreen API interface is shown below (to make the browser window full screen). See the followingCode:

(1) Full Screen

 
// Find the right method, call on correct elementfunction launchfullscreen (element) {If (element. requestfullscreen) {element. requestfullscreen ();} else if (element. required requestfullscreen) {element. required requestfullscreen ();} else if (element. webkitrequestfullscreen) {element. webkitrequestfullscreen () ;}// launch fullscreen for browsers that support it! Launchfullscreen(document.doc umentelement); // The whole page code must be executed manually before launchfullscreen (document. getelementbyid ("videoelement"); // any individual element
 

(2) Cancel full screen

// Whack fullscreenfunction cancelfullscreen () {If (document. cancelfullscreen) {document. cancelfullscreen ();} else if (document. mozcancelfullscreen) {document. canccancelfullscreen ();} else if (document. webkitcancelfullscreen) {document. webkitcancelfullscreen () ;}// cancel fullscreen for browsers that support it! Cancelfullscreen ();
 

(3) full screen attributes and events

• Document. fullscreenelement: Elements that trigger full screen.
• Document. fullscreenenabled: Whether the full screen is disabled.

(4) full screen Style

 
/* HTML */:-WebKit-full-screen {Background: pink;}:-moz-full-screen {Background: pink;}/* deeper elements */: -WebKit-full-screen video {width: 100%; Height: 100% ;}
 

Note: manual triggering is required to trigger full screen. The browser cannot automatically trigger full screen.