当前位置：首页 > 前端开发 > 正文

html 如何退出全屏播放

HTML 中，可以通过 JavaScript 退出全屏播放，使用 document.exitFullscreen() 方法即可退出全屏模式。

HTML中,退出全屏播放可以通过JavaScript来实现，全屏播放通常用于视频或游戏等需要沉浸式体验的场景，但有时用户可能需要退出全屏模式，以下是几种常见的方法来退出全屏播放：

使用 document.exitFullscreen()

document.exitFullscreen() 是退出全屏模式的最直接方法，它适用于当前文档处于全屏模式的情况，如果文档不在全屏模式，调用此方法会抛出错误。

if (document.fullscreenElement) {
  document.exitFullscreen().then(() => {
    console.log('Exited fullscreen mode');
  }).catch(err => {
    console.error('Failed to exit fullscreen:', err);
  });
} else {
  console.log('Document is not in fullscreen mode');
}

使用 Element.requestFullscreen() 和 Element.exitFullscreen()

如果你知道是哪个元素进入了全屏模式,可以直接调用该元素的 exitFullscreen() 方法。

const videoElement = document.getElementById('myVideo');
if (videoElement.fullscreenElement) {
  videoElement.exitFullscreen().then(() => {
    console.log('Exited fullscreen mode');
  }).catch(err => {
    console.error('Failed to exit fullscreen:', err);
  });
} else {
  console.log('Element is not in fullscreen mode');
}

使用全屏API的兼容性处理

不同的浏览器可能对全屏API的实现有所不同,因此为了确保兼容性，可以使用以下代码：

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen().then(() => {
      console.log('Exited fullscreen mode');
    }).catch(err => {
      console.error('Failed to exit fullscreen:', err);
    });
  } else if (document.webkitExitFullscreen) { // Safari, Chrome and Opera
    document.webkitExitFullscreen().then(() => {
      console.log('Exited fullscreen mode');
    }).catch(err => {
      console.error('Failed to exit fullscreen:', err);
    });
  } else if (document.mozCancelFullScreen) { // Firefox
    document.mozCancelFullScreen().then(() => {
      console.log('Exited fullscreen mode');
    }).catch(err => {
      console.error('Failed to exit fullscreen:', err);
    });
  } else if (document.msExitFullscreen) { // IE/Edge
    document.msExitFullscreen().then(() => {
      console.log('Exited fullscreen mode');
    }).catch(err => {
      console.error('Failed to exit fullscreen:', err);
    });
  } else {
    console.log('Fullscreen API is not supported');
  }
}

监听全屏变化事件

你还可以监听全屏模式的变化,以便在用户退出全屏时执行某些操作。

document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) {
    console.log('Exited fullscreen mode');
  } else {
    console.log('Entered fullscreen mode');
  }
});

结合按钮或其他UI元素

退出全屏功能会与按钮或其他UI元素结合使用,以便用户可以在界面上轻松退出全屏模式。

<button id="exitFullscreenButton">Exit Fullscreen</button>
<script>
  const exitButton = document.getElementById('exitFullscreenButton');
  exitButton.addEventListener('click', () => {
    if (document.fullscreenElement) {
      document.exitFullscreen().then(() => {
        console.log('Exited fullscreen mode');
      }).catch(err => {
        console.error('Failed to exit fullscreen:', err);
      });
    } else {
      console.log('Document is not in fullscreen mode');
    }
  });
</script>

处理全屏错误

在退出全屏时,可能会遇到各种错误，例如用户没有进入全屏模式或浏览器不支持全屏API，建议在调用退出全屏方法时使用 try-catch 块来捕获可能的错误。

try {
  if (document.fullscreenElement) {
    await document.exitFullscreen();
    console.log('Exited fullscreen mode');
  } else {
    console.log('Document is not in fullscreen mode');
  }
} catch (err) {
  console.error('Failed to exit fullscreen:', err);
}

全屏API的浏览器支持

虽然大多数现代浏览器都支持全屏API,但不同浏览器的实现方式可能有所不同，以下是一些常见浏览器的全屏API前缀：

浏览器 前缀 方法
Chrome, Safari, Opera webkit webkitRequestFullscreen, webkitExitFullscreen
Firefox moz mozRequestFullScreen, mozCancelFullScreen
Internet Explorer/Edge ms msRequestFullscreen, msExitFullscreen
无前缀 requestFullscreen, exitFullscreen

示例代码

以下是一个完整的示例,展示了如何在HTML中实现退出全屏功能：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">Exit Fullscreen Example</title>
</head>
<body>
  <h1>Exit Fullscreen Example</h1>
  <button id="enterFullscreenButton">Enter Fullscreen</button>
  <button id="exitFullscreenButton">Exit Fullscreen</button>
  <video id="myVideo" width="600" controls>
    <source src="example.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <script>
    const videoElement = document.getElementById('myVideo');
    const enterButton = document.getElementById('enterFullscreenButton');
    const exitButton = document.getElementById('exitFullscreenButton');
    enterButton.addEventListener('click', () => {
      if (videoElement.requestFullscreen) {
        videoElement.requestFullscreen().then(() => {
          console.log('Entered fullscreen mode');
        }).catch(err => {
          console.error('Failed to enter fullscreen:', err);
        });
      } else if (videoElement.webkitRequestFullscreen) { // Safari, Chrome and Opera
        videoElement.webkitRequestFullscreen().then(() => {
          console.log('Entered fullscreen mode');
        }).catch(err => {
          console.error('Failed to enter fullscreen:', err);
        });
      } else if (videoElement.mozRequestFullScreen) { // Firefox
        videoElement.mozRequestFullScreen().then(() => {
          console.log('Entered fullscreen mode');
        }).catch(err => {
          console.error('Failed to enter fullscreen:', err);
        });
      } else if (videoElement.msRequestFullscreen) { // IE/Edge
        videoElement.msRequestFullscreen().then(() => {
          console.log('Entered fullscreen mode');
        }).catch(err => {
          console.error('Failed to enter fullscreen:', err);
        });
      } else {
        console.log('Fullscreen API is not supported');
      }
    });
    exitButton.addEventListener('click', () => {
      if (document.exitFullscreen) {
        document.exitFullscreen().then(() => {
          console.log('Exited fullscreen mode');
        }).catch(err => {
          console.error('Failed to exit fullscreen:', err);
        });
      } else if (document.webkitExitFullscreen) { // Safari, Chrome and Opera
        document.webkitExitFullscreen().then(() => {
          console.log('Exited fullscreen mode');
        }).catch(err => {
          console.error('Failed to exit fullscreen:', err);
        });
      } else if (document.mozCancelFullScreen) { // Firefox
        document.mozCancelFullScreen().then(() => {
          console.log('Exited fullscreen mode');
        }).catch(err => {
          console.error('Failed to exit fullscreen:', err);
        });
      } else if (document.msExitFullscreen) { // IE/Edge
        document.msExitFullscreen().then(() => {
          console.log('Exited fullscreen mode');
        }).catch(err => {
          console.error('Failed to exit fullscreen:', err);
        });
      } else {
        console.log('Fullscreen API is not supported');
      }
    });
  </script>
</body>
</html>

常见问题解答（FAQs）

Q1: 如何检测当前是否处于全屏模式？

A1: 你可以通过检查 document.fullscreenElement 或 document.webkitIsFullScreen、document.mozFullScreen、document.msFullscreenElement 来判断当前是否处于全屏模式，如果这些属性返回 true，则表示当前处于全屏模式。

if (document.fullscreenElement || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement) {
  console.log('Currently in fullscreen mode');
} else {
  console.log('Not in fullscreen mode');
}

Q2: 如何处理全屏模式下的键盘事件？

A2: 在全屏模式下，某些键盘事件（如 Esc 键）可能会被浏览器默认处理为退出全屏，如果你希望自定义这些事件的处理逻辑，可以在全屏模式下监听相应的事件，并阻止默认行为。

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    document.addEventListener('keydown', handleKeyDown);
  } else {
    document.removeEventListener('keydown', handleKeyDown);
  }
});
function handleKeyDown(event) {
  if (event.key === 'Escape') {
    event.preventDefault(); // 阻止默认的退出全屏行为
    // 自定义逻辑
    console.log('Escape key pressed while in fullscreen');
  }
}

ML 退出全屏播放
0

相关文章