zoukankan      html  css  js  c++  java
  • Fullscreen API:全屏操作

    function launchFullscreen(element) {
      if(element.requestFullscreen) {
        element.requestFullscreen();
      } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if(element.msRequestFullscreen){
        element.msRequestFullscreen();
      } else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen();
      }
    }
    
    launchFullscreen(document.documentElement);
    launchFullscreen(document.getElementById("videoElement"));
    :-webkit-full-screen #myvideo {
      width: 100%;
      height: 100%;
    }

    function exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    }
    
    exitFullscreen();

    var fullscreenElement =
      document.fullscreenElement ||
      document.mozFullScreenElement ||
      document.webkitFullscreenElement;

    var fullscreenEnabled =
      document.fullscreenEnabled ||
      document.mozFullScreenEnabled ||
      document.webkitFullscreenEnabled ||
      document.msFullscreenEnabled;
    
    if (fullscreenEnabled) {
      videoElement.requestFullScreen();
    } else {
      console.log('浏览器当前不能全屏');
    }


    document.addEventListener("fullscreenchange", function( event ) {
      if (document.fullscreenElement) {
        console.log('进入全屏');
      } else {
        console.log('退出全屏');
      }
    });
    :-webkit-full-screen {
      /* properties */
    }
    
    :-moz-full-screen {
      /* properties */
    }
    
    :-ms-fullscreen {
      /* properties */
    }
    
    :full-screen { /*pre-spec */
      /* properties */
    }
    
    :fullscreen { /* spec */
      /* properties */
    }
    
    /* deeper elements */
    :-webkit-full-screen video {
      width: 100%;
      height: 100%;
    }
     
     
  • 相关阅读:
    STM32的CRC32 软件实现代码
    AES CBC/CTR 加解密原理
    Either, neither, both
    Answer Sheet
    Both
    How to convert a byte to its binary string representation
    how convert large HEX string to binary array ?
    TEA -- Tiny Encryption Algorithm
    DES
    IAR EWARM Checksum Technical Note
  • 原文地址:https://www.cnblogs.com/Javi/p/11533107.html
Copyright © 2011-2022 走看看