视频播放组件中，样式全屏和全屏的区别是什么？

在视频播放组件中，"样式全屏"和"全屏"是两种不同的显示模式，它们的主要区别在于显示范围和用户体验。以下是详细的解释：

样式全屏（Pseudo Fullscreen）

显示范围：
- 样式全屏通常是指在当前网页中最大化视频播放器的显示区域，但不会覆盖整个浏览器窗口。
- 视频播放器会扩展到其父容器的最大尺寸，但仍然受制于浏览器的布局和样式。
用户体验：
- 用户仍然可以看到浏览器的其他部分，如地址栏、工具栏等。
- 用户可以继续与网页的其他部分进行交互，如滚动页面、点击其他元素等。
- 通常通过CSS样式实现，例如设置播放器的宽度和高度为100%。
实现方式：
- 通过CSS和JavaScript控制播放器的样式。
- 例如，可以使用CSS的 width: 100%; height: 100%; 以及JavaScript的 player.style.width = '100%'; player.style.height = '100%'; 来实现。

全屏（True Fullscreen）

显示范围：
- 全屏模式是指视频播放器覆盖整个屏幕，包括浏览器的地址栏、工具栏等。
- 视频播放器会占据整个屏幕，提供沉浸式的观看体验。

2.用户体验**：

用户无法看到浏览器的部分只能看到视频播放器 - 用户无法与网页的其他部分进行交互，除非退出全屏模式。
通常用于提供更好的观看体验，特别是在观看高清视频或进行演示时。

实现方式：
- 通过浏览器的全屏API实现。
- 例如，可以使用 element.requestFullscreen() 方法将指定的元素切换到全屏模式。
- 退出全屏模式可以使用 document.exitFullscreen() 方法。

示例代码

样式全屏

<div id="player" style="width: 100%; height: 100%;">
  <!-- 视频播放器内容 -->
</div>

<script>
  function enterPseudoFullscreen() {
    const player = document.getElementById('player');
    player.style.width = '100%';
    player.style.height = '100%';
  }

  function exitPseudoFullscreen() {
    const player = document.getElementById('player');
    player.style.width = 'auto';
    player.style.height = 'auto';
  }
</script>

全屏

<div id="player">
  <!-- 视频播放器内容 -->
</div>

<script>
  function enterFullscreen() {
    const player = document.getElementById('player');
    if (player.requestFullscreen) {
      player.requestFullscreen();
    } else if (player.mozRequestFullScreen) { // Firefox
      player.mozRequestFullScreen();
    } else if (player.webkitRequestFullscreen) { // Chrome, Safari and Opera
      player.webkitRequestFullscreen();
    } else if (player.msRequestFullscreen) { // IE/Edge
      player.msRequestFullscreen();
    }
  }

  function exitFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { // Firefox
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { // IE/Edge
      document.msExitFullscreen();
    }
  }
</script>

总结

样式全屏：在当前网页中最大化视频播放器的显示区域，但不覆盖整个浏览器窗口。
全屏：覆盖整个屏幕，提供沉浸式的观看体验，用户无法与网页的其他部分进行交互。

选择哪种模式取决于具体的使用场景和用户体验需求。

__EOF__

本文作者：龙陌
本文链接：https://www.cnblogs.com/longmo666/p/18520215.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！