似是腦中火爆之詞。

圖片來源：梗圖倉庫
本集沒有任何動物腦袋爆炸。

本篇紀錄之不可思議事件為fullscreenchange與fullscreenerror事件。

事件其卅二：fullscreenchange

此事件發生於元素切換至全螢幕模式或由此模式復原為原尺寸。

MDN：
The fullscreenchange event is fired immediately after an Element switches into or out of fullscreen mode.

並可藉由取得文件 (非元素) 之fullscreenElement屬性之值確認此屬性是否處於全螢幕模式，若值為null，則非處全螢幕模式。

MDN：
To find out whether the Element is entering or exiting fullscreen mode, check the value of Document.fullscreenElement: if this value is null then the element is exiting fullscreen mode, otherwise it is entering fullscreen mode.

以下示例首先試作一簡易影片播映器：

const player = document.querySelector(".player");
const video = player.querySelector("video");
const playButton = player.querySelector(".btn-play");
const fullscreenButton = player.querySelector(".btn-fullscreen");

function togglePlay() {
  if (video.paused === true) {
    video.play();
    playButton.textContent = "▌▌";
  } else {
    video.pause();
    playButton.textContent = "►";
  }
}

function changeFullscreen() {
  if (document.fullscreenElement === null) {
    player.requestFullscreen();
    this.textContent = "〉〈";
  } else {
    document.exitFullscreen();
    this.textContent = "〈　〉";
  }
}

playButton.addEventListener("click", togglePlay);
fullscreenButton.addEventListener("click", changeFullscreen);

分段註釋如下：
選取播映器元素。

const player = document.querySelector(".player");

並於播映器元素中選取影片元素、播放按鈕元素以及全螢幕按鈕元素。

const video = player.querySelector("video");
const playButton = player.querySelector(".btn-play");
const fullscreenButton = player.querySelector(".btn-fullscreen");

定義二函式之術，名togglePlay及changeFullscreen。

函式之術togglePlay之內容為當影片元素處於暫停狀態之時，使影片改為播放狀態，並使播放按鈕元素顯示為暫停 ▌▌之態；當影片元素處於播放狀態之時，使影片改為暫停狀態，並使播放按鈕元素顯示為播放 ► 之態。

function togglePlay() {
  if (video.paused === true) {
    video.play();
    playButton.textContent = "▌▌";
  } else {
    video.pause();
    playButton.textContent = "►";
  }
}

函式之術changeFullscreen之內容為當文件中無元素處於全螢幕狀態之時 (fullscreenElement屬性之值為null)，操以requestFullscreen()之術使播映器元素切換為全螢幕狀態，並使全螢幕按鈕元素顯示為 〉〈 之態；當文件中有元素處於全螢幕狀態之時，對文件 (非元素) 操以exitFullscreen()之術使元素退出全螢幕狀態，並使全螢幕按鈕元素顯示為〈　〉之態。

function changeFullscreen() {
  if (document.fullscreenElement === null) {
    player.requestFullscreen();
    fullscreenButton.textContent = "〉〈";
  } else {
    document.exitFullscreen();
    fullscreenButton.textContent = "〈　〉";
  }
}

於播放按鈕元素以及全螢幕按鈕元素設定click事件之觀測器，並分別施以togglePlay及changeFullscreen函式之術。

playButton.addEventListener("click", togglePlay);
fullscreenButton.addEventListener("click", changeFullscreen);

則可製作簡易之小七鼠吃播自主性感官子午線反應 (ASMR) 影片之播映器，可播放、暫停影片，亦能切換或取消全螢幕之模式。

完成播映器後，以下示例演示利用fullscreenchange事件施一操術法。

const text = player.querySelector(".text");

function showText() {
  if (document.fullscreenElement) {
    text.style.opacity = 1;
    text.style.transition = "opacity 0.3s";

    setTimeout(() => {
      text.style.opacity = 0;
    }, 1000);
  }
}

player.addEventListener("fullscreenchange", showText);

選取文字元素。

const text = player.querySelector(".text");

定義一函式之術showText，內容為顯示此文字元素。

function showText() {
  if (document.fullscreenElement) {
    text.style.opacity = 1;
    text.style.transition = "opacity 0.3s";

    setTimeout(() => {
      text.style.opacity = 0;
    }, 1000);
  }
}

對播映器設定事件觀測器，以觀測fullscreenchange事件，並施以showText函式之術。

player.addEventListener("fullscreenchange", showText);

即可於播映器切換至全螢幕之時，顯示即將出現巨大小七鼠之文字提示。挖哭挖哭。

小七鼠ASMR於此處享用

事件其卅三：fullscreenerror

此事件發生於介面無法使元素切換至全螢幕模式之時。

MDN：
The fullscreenerror event is fired when the browser cannot switch to fullscreen mode.

通常可用於自製一提示文字，告知使用介面之人類，介面無法正常運行。紀錄者能力暫有限，故示例暫無使用此事件演示操術法。

示例之術式

https://github.com/CReticulata/2024ithome/tree/main/Day29

翻譯

介面：瀏覽器
文件：document

相關連結

• fullscreenchange - MDN
• fullscreenerror - MDN