Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to achieve HTML5 full-screen API". In daily operation, I believe many people have doubts about how to achieve HTML5 full-screen API. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to achieve HTML5 full-screen API". Next, please follow the editor to study!

In more and more real web applications, JavaScript is also becoming more and more powerful.

FullScreen API is a new JavaScript API, simple and powerful. FullScreen allows us to programmatically request full-screen display from users. If the interaction is complete, we can exit full-screen status at any time.

Online demo Demo: Fullscreen API Example

(in this Demo, relevant properties can be displayed by Launch, Hide, and Dump, and log information can be viewed through the chrome console.)

Start full screen mode

The full-screen API requestFullscreen method still uses the prefixed method name in some old browsers, so it may need to be detected and determined:

With a prefix, which means that each browser kernel is not common.

The code is as follows:

/ / find the supported method and use the element call that requires full screen

Function launchFullScreen (element) {

If (element.requestFullscreen) {

Element.requestFullscreen ()

} else if (element.mozRequestFullScreen) {

Element.mozRequestFullScreen ()

} else if (element.webkitRequestFullscreen) {

Element.webkitRequestFullscreen ()

} else if (element.msRequestFullscreen) {

Element.msRequestFullscreen ()

}

}

/ / launch full screen in a browser that supports full screen

/ / entire page

LaunchFullScreen (document.documentElement)

/ / an element

LaunchFullScreen (document.getElementById ("videoElement"))

Take the DOM elements that need to be displayed in full screen as parameters. Call this method to allow window to enter full screen state. Sometimes, user consent may be required (the browser interacts with the user). If the user refuses, there may be a variety of incomplete full screen.

If the user agrees to enter the full screen, toolbars and other browser components will be hidden so that the width and height of the document frame span the entire screen.

Exit full screen mode

Use the exitFullscreen method to make the browser exit the full screen and return to the original layout. This method also supports prefix methods on some older browsers.

The code is as follows:

/ / exit fullscreen

Function exitFullscreen () {

If (document.exitFullscreen) {

Document.exitFullscreen ()

} else if (document.mozExitFullScreen) {

Document.mozExitFullScreen ()

} else if (document.webkitExitFullscreen) {

Document.webkitExitFullscreen ()

}

}

/ / call the exit full screen method!

ExitFullscreen ()

Please note that exitFullscreen can only be called through the document object-- rather than using the normal DOM element.

Fullscreen attributes and events

The bad news is that so far, full-screen events and methods are still prefixed, and the good news is that mainstream browsers will support them soon.

1.document.fullscreenElement: the element element that is currently in full screen state.

2.document.fullscreenEnabled: marks whether fullscreen is currently available.

When entering / exiting full-screen mode, the fullscreenchange event is triggered:

The code is as follows:

Var fullscreenElement =

Document.fullscreenEnabled

| | document.mozFullscreenElement |

| | document.webkitFullscreenElement |

Var fullscreenEnabled =

Document.fullscreenEnabled

| | document.mozFullscreenEnabled |

| | document.webkitFullscreenEnabled |

When initializing the full-screen method, you can detect which event you need to listen for.

Fullscreen CSS

Browsers provide some useful fullscreen CSS control rules:

The code is as follows:

/ * html * /

:-webkit-full-screen {

/ * properties * /

}

:-moz-fullscreen {

/ * properties * /

}

: fullscreen {

/ * properties * /

}

/ * deeper elements * /

:-webkit-full-screen video {

Width: 100%

Height: 100%

}

/ * styling the backdrop * /

:: backdrop {

/ * properties * /

}

In some cases, WebKit requires some special handling, so you may need the above code when dealing with multimedia.

I think Fullscreen API is super simple and super useful. I first saw this API in a full-client first-person shooter called MDN's BananaBread demo, which is an excellent example of using full-screen mode.

Full-screen API provides a way to enter and exit full-screen mode, and provides corresponding events to monitor changes in full-screen state, so all aspects are connected.

Remember this good API-it will certainly come in handy at some point in the future!

At this point, the study on "how to achieve HTML5 full-screen API" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.