Question

var stack = [];

var tip = function() {
  if (stack.length > 0) {
    return stack[stack.length - 1];
  } else {
    return null;
  }
};

function myFullscreen(elem) {
    if (tip() === elem) {
      document.webkitExitFullscreen();
      stack.pop();
    } else {
      elem.webkitRequestFullscreen();
      stack.push(elem);
    }
}

var vid = document.getElementById('vid');
var ifr = document.getElementById('ifr');
var button = document.getElementById('buttonRight');

function handler(e) {
  if (e.keyCode === 49) { // key 1
    myFullscreen(vid);
  }
  if (e.keyCode === 50) { // key 2
    myFullscreen(ifr);
  }
  if (e.keyCode === 51) { // key 3
    myFullscreen(document.documentElement);
  }
}
window.addEventListener('keyup', handler);

button.addEventListener('click', function(){
  var side = document.getElementById('right-side');
  if(side.className === "show"){
    side.className = "";
  } else {
    side.className += "show";
  }
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
<div class="container">
  <video src="http://9a27bbc586dd80f4a734-4d0355cf9e89be09aa440f2192ff2da0.r28.cf1.rackcdn.com/exam-speaking-test-talk-about-yourself.mp4" width = '400' height = '200' id="vid"></video>
  
  <div id="right-side">
    <button id="buttonRight">Toogle</button>
    <iframe frameborder="no" src="https://www.youtube.com/embed/CwaUuR13Hs0?modestbranding=1&amp;enablejsapi=1&amp;controls=0&amp;iv_load_policy=3&amp;rel=0" allowfullscreen="1" id="ifr"></iframe>
  </div>

</div>

<div class="controls">
  <p>
    key 1 - fullscreen vid
  </p>
  <p>
    key 2 - fullscreen iframe
  </p>
  <p>
    key 3 - fullscreen document
  </p>
</div>
  

</body>
</html>

Standalone JS Bin

鉴于步骤顺序：

按'Toogle'按钮
按键3
按键2
按键2
按键3

在这些步骤之后，我是否可以通过更改布局来保持id =“right-side”的div？它应该保持在右侧。

全屏API问题是由退出全屏与Esc和退出与document.exitFullscreen之间的差异引起的

0 个答案: