似是腦中火爆之詞。
圖片來源:梗圖倉庫
本集沒有任何動物腦袋爆炸。
本篇紀錄之不可思議事件為fullscreenchange
與fullscreenerror
事件。
此事件發生於元素切換至全螢幕模式或由此模式復原為原尺寸。
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);
即可於播映器切換至全螢幕之時,顯示即將出現巨大小七鼠之文字提示。挖哭挖哭。
此事件發生於介面無法使元素切換至全螢幕模式之時。
MDN:
The fullscreenerror event is fired when the browser cannot switch to fullscreen mode.
通常可用於自製一提示文字,告知使用介面之人類,介面無法正常運行。紀錄者能力暫有限,故示例暫無使用此事件演示操術法。
https://github.com/CReticulata/2024ithome/tree/main/Day29
介面:瀏覽器
文件:document