zoukankan      html  css  js  c++  java
  • [HTML]JS全屏代码

    video全屏参考:https://www.thecssninja.com/javascript/fullscreen

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JS全屏</title>
    <style>
    html:-moz-full-screen {background: red}
    html:-webkit-full-screen {background: red}
    html:fullscreen {background: red}
    </style>
    </head>
    
    <body>
    <a href="#" onClick="fullscreen()">fullscreen</a>&nbsp;|&nbsp;<a href="#" onClick="exitFullscreen()">exitFullscreen</a>
    <p id="state">no</p>
    <script>
    // 全屏
    function fullscreen() {
      var docElm = document.documentElement;
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
      } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
      } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
      } else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen();
      }
    }
    
    // 退出全屏
    function exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    }
    
    // 监听是否全屏
    window.onload = function() {
      var elem = document.getElementById('state');
      document.addEventListener('fullscreenchange',
        function() {
          elem.innerText = document.fullscreen ? 'yes': 'no';
        },
      false);
      document.addEventListener('mozfullscreenchange',
        function() {
          elem.innerText = document.mozFullScreen ? 'yes': 'no';
        },
      false);
      document.addEventListener('webkitfullscreenchange',
        function() {
          elem.innerText = document.webkitIsFullScreen ? 'yes': 'no';
        },
      false);
      document.addEventListener('msfullscreenchange',
        function() {
          elem.innerText = document.msFullscreenElement ? 'yes': 'no';
        },
      false);
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    030-PHP日期查询函数
    029-PHP取随机数
    028-PHP常用数学函数abs和acos和asin
    027-PHP编码和解码函数base64
    026-PHP常用字符串函数(三)
    025-PHP常用字符串函数(二)
    024-PHP常用字符串函数(一)
    023-PHP常用数组函数
    022-PHP数组排序asort
    021-PHP常用的数值类型判断函数
  • 原文地址:https://www.cnblogs.com/hcbin/p/5914322.html
Copyright © 2011-2022 走看看