[HTML]JS全屏代碼

本文轉載自查看原文 2016-09-27 21:16 4067 網站網頁

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML頁面全屏/退出全屏 JS實現全屏和退出全屏 HTML5實現全屏 HTML5 全屏特性自己用js實現全屏滾動 js控制全屏顯示 js監聽全屏的事件 js 全屏事件參考三 JS實現元素的全屏、退出全屏功能 (轉)HTML5 全屏 API