如何以全屏模式打开链接（网页），javascript？

Question

我只需要全屏打开一个新页面。

因此，用户按下一个按钮，然后视频（隐藏在主页上）全屏打开并开始播放。当用户按下按钮关闭全屏或按“esc”键时，视频将暂停，全屏关闭且 iframe 不可见...

我试图让这个演示工作，但没有结果。 此外，只有当我只打开视频元素而不是 iframe 时，我才能使它工作......

const fullscreen   =  document.querySelector('.playnow');
const video        =  document.querySelector('#myvideo');

fullscreen.addEventListener('click', toggleFullScreen);

// Create fullscreen video button
function toggleFullScreen() {

    if(video.requestFullScreen){
        video.requestFullScreen();
    } else if(video.webkitRequestFullScreen){
        video.webkitRequestFullScreen();
    } else if(video.mozRequestFullScreen){
        video.mozRequestFullScreen();
    };
    video.classList.remove("d-none");
}

body{
  margin:0;
  padding:0;
}
.video-container{
  width:100%;
  height:100vh;
  margin: 0 auto;
  position:relative;
  background-image: url(https://images.unsplash.com/photo-1616485828923-2640a1ee48b4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80);
  background-repeat:no-repeat;
  background-size:cover;
  background-position: center;
}

#myvideo{
 
}

.d-none{
  display:none;
}

<div class="video-container">
  <button class="playnow">Open Video in Fullscreen Mode</button>


  <video width="100%" autoplay id="myvideo" class="d-none">   
      <source src="//d2zihajmogu5jn.cloudfront.net/big-buck-bunny/master.m3u8" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

我试过了：

• https://gomakethings.com/how-to-play-a-video-in-full-screen-mode-when-its-thumbnail-is-clicked-with-vanilla-js/（更好的演示，但全屏关闭后视频仍然可见...）

• https://www.hongkiat.com/blog/html5-fullscreen-api/

但没有明显的结果。

谢谢你，卢卡

Answer 1

我觉得你可以试试这样的。

const btn = document.querySelector('button')
const screenWidth = window.screen.availWidth;
const screenHeight = window.screen.availHeight

function openFullscreenWindow() {
  window.open('https://github.com', '_blank', `width=${screenWidth},height=${screenHeight}`)
}

btn.addEventListener('click', openFullscreenWindow)

<button>Open fullscreen</button>

Answer 2

也许在媒体上阅读这篇文章找到了解决方案：https://medium.com/@roidescruzlara/controlling-the-full-screen-mode-cda0fae4c4f2

现在我可以根据需要使用它了。

非常感谢。

var currentWindowHeight = window.innerHeight;
var element = document.getElementById("container");
var btn = document.getElementById("btn-screen-mode");
var film = document.getElementById("film");
var isFullScreen = false;

window.addEventListener("keydown", useCustomFullScreen.bind(this));
window.addEventListener("resize", isExitingFullScreen.bind(this));

/**
* Gets available exitFullscreen method 
*/
function getRequestFullScreen() {
  return (
    element.requestFullscreen ||
    element["mozRequestFullscreen"] ||
    element["msRequestFullscreen"] ||
    element["webkitRequestFullscreen"]
  );
}

/**
* Gets available requestFullscreen method 
*/
function getExitFullscreen() {
  return (
    document["webkitExitFullscreen"] ||
    document["msExitFullscreen"] ||
    document.exitFullscreen
  );
}

/**
* Prevents browser to enter the default fullscreen mode and uses the custom fullscreen method
*/
function useCustomFullScreen(event) {
  if (event.key === "F11") {
    event.preventDefault();
    toggleFullScreen();
  }
}

/**
* Detects if the browser is exiting fullscreen mode when window resize
*/
function isExitingFullScreen() {
  if (isFullScreen && currentWindowHeight >= window.innerHeight) {
    isFullScreen = false;
    currentWindowHeight = window.innerHeight;
    
    // Do your full screen mode stuff 
    updateBtn();
  }
}

/**
* Update button appearance according to the current screen mode
*/
function updateBtn() {
  if (isFullScreen) {
    btn.classList.remove("enter-fullscreen");
    btn.classList.add("exit-fullscreen");
    element.classList.remove("d-none");
    film.play();
    return;
  }
  
  btn.classList.remove("exit-fullscreen");
  btn.classList.add("enter-fullscreen");
  element.classList.add("d-none");
  film.pause();
}

/**
* Toggles the fullscreen mode using available fullscreen API
*/
function toggleFullScreen() {
  if (!isFullScreen && getRequestFullScreen()) {
    getRequestFullScreen().call(element);
  } else {
    getExitFullscreen().call(document);
  }

  currentWindowHeight = window.innerHeight;
  isFullScreen = !isFullScreen;
  
  // Do your full screen mode stuff 
  updateBtn();
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

#container video {
   width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro{
  width:100%;
  height:100vh;
}

.intro video{
  max-width:100%;
  height:auto;
  object-fit: cover;
}

.d-none{
  display:none;
}

#btn-screen-mode {
  
  width: 30px;
  height: 30px;
  border-radius: 5px;
  border: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

.enter-fullscreen {
  position: absolute;
  top:0;bottom:0;left:0;right:0;
  margin: auto;
  z-index:2322333;
  background-image: url(https://cdn.icon-icons.com/icons2/1674/PNG/512/expand_111060.png);
}

.exit-fullscreen {
  border: 2px solid #000;
  position: absolute;
  top:20px;
  right:20px;
  z-index:2322333;
  background-image: url(https://cdn.icon-icons.com/icons2/1673/PNG/512/collapseoutline_110793.png);
}

<div class="intro">
  <button id="btn-screen-mode" class="enter-fullscreen" onclick="toggleFullScreen()"></button>
  <video autoplay loop muted playsinline="true" webkit-playsinline="true">
              <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
  </video>
</div>


<div class="container d-none" id="container">
      <button id="btn-screen-mode" class="exit-fullscreen" onclick="toggleFullScreen()"></button>
      <video loop playsinline="true" webkit-playsinline="true" id="film">
            <source src="//d2zihajmogu5jn.cloudfront.net/big-buck-bunny/master.m3u8" type="video/mp4">
      </video>
      
</div>