iT邦幫忙

2024 iThome 鐵人賽

DAY 29
1

似是腦中火爆之詞。
img

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

本篇紀錄之不可思議事件為fullscreenchangefullscreenerror事件。

事件其卅二: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");

定義二函式之術,名togglePlaychangeFullscreen

函式之術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事件之觀測器,並分別施以togglePlaychangeFullscreen函式之術。

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

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

完成播映器後,以下示例演示利用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);

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

小七鼠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

相關連結


上一篇
Day 28 - 有時候運氣太好不一定是好事
下一篇
Day 30 - 寫在最後面的通常是未完待續
系列文
元素不可思議事件簿30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言