影片播放元件中，樣式全屏和全屏的區別是什麼？

龙陌發表於2024-11-01
元件

在影片播放元件中，"樣式全屏"和"全屏"是兩種不同的顯示模式，它們的主要區別在於顯示範圍和使用者體驗。以下是詳細的解釋：

樣式全屏（Pseudo Fullscreen）

  1. 顯示範圍：

    • 樣式全屏通常是指在當前網頁中最大化影片播放器的顯示區域，但不會覆蓋整個瀏覽器視窗。
    • 影片播放器會擴充套件到其父容器的最大尺寸，但仍然受制於瀏覽器的佈局和樣式。

  2. 使用者體驗：

    • 使用者仍然可以看到瀏覽器的其他部分，如位址列、工具欄等。
    • 使用者可以繼續與網頁的其他部分進行互動，如滾動頁面、點選其他元素等。
    • 通常透過CSS樣式實現，例如設定播放器的寬度和高度為100%。

  3. 實現方式：

    • 透過CSS和JavaScript控制播放器的樣式。
    • 例如，可以使用CSS的 width: 100%; height: 100%; 以及JavaScript的 player.style.width = '100%'; player.style.height = '100%'; 來實現。

全屏（True Fullscreen）

  1. 顯示範圍：
    • 全屏模式是指影片播放器覆蓋整個螢幕，包括瀏覽器的位址列、工具欄等。
    • 影片播放器會佔據整個螢幕，提供沉浸式的觀看體驗。

2.使用者體驗**：

  • 使用者無法看到瀏覽器的部分只能看到影片播放器 - 使用者無法與網頁的其他部分進行互動，除非退出全屏模式。
  • 通常用於提供更好的觀看體驗，特別是在觀看高畫質影片或進行演示時。
  1. 實現方式：
    • 透過瀏覽器的全屏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>

總結

  • 樣式全屏：在當前網頁中最大化影片播放器的顯示區域，但不覆蓋整個瀏覽器視窗。
  • 全屏：覆蓋整個螢幕，提供沉浸式的觀看體驗，使用者無法與網頁的其他部分進行互動。

選擇哪種模式取決於具體的使用場景和使用者體驗需求。

相關文章