功能exitFullscreen没有触发

Question

我是 javascript 的新手，我正在使用全屏 API 构建全屏播放视频。

在我的应用程序中，我试图在用户退出全屏模式时触发视频 div 中的 css 更改，但它似乎不起作用。我的猜测是我称 else 语句是错误的，但我不确定它错在哪里。非常感谢一些帮助:)

代码贴在下面

HTML

<div id="film">
<video class="video_player" id="player" width="20%" controls="controls" muted >
<source src="/testmovie.mp4"/>
</video>
</div>

<button id="fullscreenFilm" onclick="goFullscreen('player'); playVid();">
PLAY FILM
</button>

CSS

#film {
display:none;
}

JS

var vid = document.getElementById('player'); 
var container = document.getElementById('film'); 

function goFullscreen(id) {
var element = document.getElementById(id);   

if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();

} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}  

else {
if (element.exitFullscreen) {
  element.exitFullscreen();
  container.style.display = "none";
  }
 }

}


function playVid() { 

container.style.display = "block";
vid.play(); 
vid.currentTime = 0; 

}

编辑 1

我尝试了这种新方法来检测何时关闭全屏，但 display:none 仍然无法正常工作。

function goFullscreen(id) {
var element = document.getElementById(id);   

if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();

} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}  

}



function toggleFullScreen() {
if (!vid.mozFullScreen && !document.webkitFullScreen) {
  if (vid.mozRequestFullScreen) {
    vid.mozRequestFullScreen();
  } else {
    vid.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
  }
  document.mozFullScreen = true;
  document.webkitFullScreen = true;
  } else {
  if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else {
    document.webkitCancelFullScreen();
  }
  }
  }


 document.addEventListener("keydown", function(e) {
 if (e.keyCode == 13) {
  toggleFullScreen();
  container.style.display = "none";
  }
  }, false);




 function playVid() { 

container.style.display = "block";
vid.play(); 
vid.currentTime = 0; 

}

Answer 1

您的函数 goFullscreen('player') 仅在单击此处触发，并且在退出全屏时不会再次触发。我建议添加另一个函数 exitFullscreen()，当他们退出全屏并让该函数处理您的逻辑时，您将其添加为 eventListner。关于如何处理这个HTML5 exiting video fullscreen，这里已经写了一个更详细的答案，您只想使用他们的示例将您的更改添加到他们的回调函数中的css：

document.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
      container.style.display = "none";
    }
  }, false);

我应该注意我用他们的一个例子来表明有两个不同的事件发生，你需要考虑。在链接中，他们发布了一个单击事件侦听器，您可以将其添加到视频中，它将为您处理您只需要添加的所有内容。因此，在每次点击事件中，它都会进行检查。使用您当前的代码，它只会在您单击不在视频上的按钮时进行检查

从前面提到的帖子中窃取并进行编辑：

document.getElementById('player').addEventListener("click", function() {
   if (!document.fullscreenElement &&    // alternative standard method
   !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
     if (video.requestFullscreen) {
      video.requestFullscreen();
     } else if (video.msRequestFullscreen) {
      video.msRequestFullscreen();
     } else if (video.mozRequestFullScreen) {
      video.mozRequestFullScreen();
     } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
     }
    } else {
     //This is now where you would want to revent back to the display none
         container.style.display = "none";
         if (document.exitFullscreen) {
          document.exitFullscreen();
         } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
         } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
         } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
         }
        }
       });