On the full-screen manipulation of JavaScript control HTML5, the problem of browser compatibility _javascript skills

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 ~