If you want an element to be displayed in Full-screen mode (for example, <video>), you can call the Requestfullscreen () method of the element, and the implementation of this method in Gecko is Element.mozrequestfullscreen (), in WebKit for Element.webkitrequestfullscreen ().
such as an instance:
var elem = document.getElementById ("Myvideo");
if (elem.requestfullscreen) {
elem.requestfullscreen (); IE Browser
} else if (elem.mozrequestfullscreen) {
elem.mozrequestfullscreen (); Firefox browser
} else if (elem.webkitrequestfullscreen) {
elem.webkitrequestfullscreen (); Google browser
}
Running here, there is a notable difference in the two implementations ofGecko and WebKit: Gecko automatically adds CSS to the element to stretch it to fill the screen: "width:100%; height:100% ". WebKit does not do this; it lets the full screen element center into the center of the screen in its original size, and the rest becomes black. In order to achieve the same full-screen effect as the Gecko under WebKit, you need to manually add CSS rules to the elements width:100%; height:100%; " :
function Togglefullscreen () {if (!document.fullscreenelement &&//Alternative Standard method!document.mozfullscreenelement &&!document.webkitfullscreenelement) {//Current working Metho
DS if (document.documentElement.requestFullscreen) {document.documentElement.requestFullscreen ();
else if (document.documentElement.mozRequestFullScreen) {document.documentElement.mozRequestFullScreen (); else if (document.documentElement.webkitRequestFullscreen) {Document.documentElement.webkitRequestFullscreen (
Element.allow_keyboard_input);
} else {if (document.cancelfullscreen) {document.cancelfullscreen ();
else if (document.mozcancelfullscreen) {document.mozcancelfullscreen ();
else if (document.webkitcancelfullscreen) {document.webkitcancelfullscreen (); }
}
}
The code first checks the Fullscreenelement attribute on the document (also checks the two prefixes with-moz-and-webkit-). If this property is null, document is currently in window mode, so we need to switch to Full-screen mode. You can enter Full-screen mode by calling Element.mozrequestfullscreen () or Webkitrequestfullscreen (), and which one you want to see which method is available.
If Full-screen mode (fullscreenelement) has been activated, we call Document.mozcancelfullscreen () or Webkitcancelfullscreen (), depending on which browser we use.
The above is a small series for everyone to talk about the full screen of JavaScript control HTML5, browser-compatible issues all content, I hope that we support cloud Habitat Community ~