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

This article mainly explains "how to use HTML5 full-screen API". Friends who are interested might as well take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use HTML5 full-screen API.

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.

Copy the code

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:

Copy the code

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:

Copy the code

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.

At this point, I believe you have a deeper understanding of "how to use HTML5 full-screen API". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.