macOS 有個非常方便的功能叫「子母畫面」,英文縮寫為 PIP,它可以讓影片懸浮在畫面的一角,我們就能一邊在別的視窗做事,一邊觀看影片。不過,要用子母畫面觀看 Twitch 並不是右鍵而已這麼簡單。
在 Safari 網頁中用子母畫面觀看影片
一般,要用子母畫面來觀看影片,非常簡單,只需要對影片按下右鍵,就會出現「進入子母畫面」的選項,按下之後就能用子母畫面播放影片了~
備註
在 YouTube 上,通常要按第二下右鍵,才會出現有「進入子母畫面」的選單。
Safari 用子母畫面觀看 Twitch 直播或影片
不過同樣的方法,在 Twitch 的直播或影片上,不管按了幾次右鍵,出現的功能選單都沒有「進入子母畫面」的選項。
這裡我們必須稍微調整一下 Twitch 的網頁程式碼,才能讓 Twitch 的直播或影片進入子母畫面。
備註
Safari 必須先開啟「網頁開發者功能」,右鍵的功能選單裡才會出現「檢閱元件」的選項。我們有另外一篇文章詳細說明了如何開啟 Safari 的網頁開發者功能,想了解更多的話,可以點擊這裡。
調整 Twitch 程式碼以進入子母畫面
這裡直接點擊「檢閱元件」,便會發現,Twitch 其實是在影片上蓋了一個看不見的播放按鈕,所以我們才能不管按影片的那裡都能暫停或播放,但這也讓我們的右鍵總是選到這個播放按鈕,而不是影片本身。
Twitch 的影片本身其實就藏在前幾行而已。如果對網頁程式不熟的話,可以直接用搜尋的,在鍵盤按「⌘+F」並搜尋「video」按下 Enter,網頁檢閱器便會直接選到 Twitch 的影片。
接下來只要點擊右方的「樣式屬性」,並輸入以下的 CSS 程式碼:
z-index: 1; // 代表網頁元素的堆疊階層
Twitch 影片便會直接跑到最上層!這時我們的右鍵也就能順利地選到 Twitch 影片,進入子母畫面了。
關於 XcodeProject
XcodeProject 創立於 2023,致力於協助開發者探索 Apple 的創新世界,學習在 iOS、iPadOS、macOS、tvOS、visionOS 與 watchOS 上開發 App,發現眾多技術與框架,讓開發者獲得更多能力。