Safari

2024 年 7 月 7 日

Safari 用子母畫面 PIP 觀看 Twitch 直播或影片

已複製到剪貼板


macOS 有個非常方便的功能叫「子母畫面」,英文縮寫為 PIP,它可以讓影片懸浮在畫面的一角,我們就能一邊在別的視窗做事,一邊觀看影片。不過,要用子母畫面觀看 Twitch 並不是右鍵而已這麼簡單。

Safari 和 Twitch
Safari 和 Twitch

在 Safari 網頁中用子母畫面觀看影片

一般,要用子母畫面來觀看影片,非常簡單,只需要對影片按下右鍵,就會出現「進入子母畫面」的選項,按下之後就能用子母畫面播放影片了~

在 Safari 用子母畫面 PIP 觀看 YouTube
在 Safari 用子母畫面 PIP 觀看 YouTube

備註

在 YouTube 上,通常要按第二下右鍵,才會出現有「進入子母畫面」的選單。

Safari 用子母畫面觀看 Twitch 直播或影片

不過同樣的方法,在 Twitch 的直播或影片上,不管按了幾次右鍵,出現的功能選單都沒有「進入子母畫面」的選項。

對 Twitch 直播影片按右鍵
對 Twitch 直播影片按右鍵

這裡我們必須稍微調整一下 Twitch 的網頁程式碼,才能讓 Twitch 的直播或影片進入子母畫面。

備註

Safari 必須先開啟「網頁開發者功能」,右鍵的功能選單裡才會出現「檢閱元件」的選項。我們有另外一篇文章詳細說明了如何開啟 Safari 的網頁開發者功能,想了解更多的話,可以點擊這裡

調整 Twitch 程式碼以進入子母畫面

這裡直接點擊「檢閱元件」,便會發現,Twitch 其實是在影片上蓋了一個看不見的播放按鈕,所以我們才能不管按影片的那裡都能暫停或播放,但這也讓我們的右鍵總是選到這個播放按鈕,而不是影片本身。

對 Twitch 影片按右鍵,點「檢閱元件」會選到播放按鈕
對 Twitch 影片按右鍵,點「檢閱元件」會選到播放按鈕

Twitch 的影片本身其實就藏在前幾行而已。如果對網頁程式不熟的話,可以直接用搜尋的,在鍵盤按「⌘+F」並搜尋「video」按下 Enter,網頁檢閱器便會直接選到 Twitch 的影片。

在 Safari 用子母畫面 PIP 觀看 Twitch 直播或影片
在 Safari 用子母畫面 PIP 觀看 Twitch 直播或影片

接下來只要點擊右方的「樣式屬性」,並輸入以下的 CSS 程式碼:

z-index: 1; // 代表網頁元素的堆疊階層

Twitch 影片便會直接跑到最上層!這時我們的右鍵也就能順利地選到 Twitch 影片,進入子母畫面了。

分享文章

已複製到剪貼板

主題文章

查看 Safari

超級感謝

關於 XcodeProject

XcodeProject 創立於 2023,致力於協助開發者探索 Apple 的創新世界,學習在 iOS、iPadOS、macOS、tvOS、visionOS 與 watchOS 上開發 App,發現眾多技術與框架,讓開發者獲得更多能力。


Contacts

Ricky Chuang

XcodeProject

RickyChuang.xcodeproj@gmail.com

XcodeProject 聯絡

contact.xcodeproj@gmail.com

最新文章