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>
  • 相关阅读:
    数组
    基本类型与封装类
    类与对象以及引用以及内存
    (一)eclipse Dynamic web project 工程目录以及文件路径问题
    jdbc
    连接
    curl命令
    java annotation
    websocket
    Trie(前缀树)和ternary trie和binary search tree
  • 原文地址:https://www.cnblogs.com/hcbin/p/5914322.html
Copyright © 2011-2022 走看看