建立您自己的畫中畫影片功能書籤

封面圖片由 charlesdeluvio

...

一些網站和視訊串流服務具有允許您以畫中畫模式觀看影片的功能，但他們將此功能鎖定在某種付費專區後面，或者使其成為訂閱的福利。

有些網站根本沒有此功能！

我覺得這很令人惱火，因為這是所有現代網絡瀏覽器中內置的功能，並且對於那些知道如何做到這一點的人來說是免費使用的，無需特殊的努力，購買，插件或黑客。

具體操作方法如下：

選項 1 - 透過網頁瀏覽器開發工具輸入程式碼

• 開啟網頁瀏覽器的開發工具（通常按 F12 鍵/右鍵點選並選擇「檢查元素」）
• 前往「控制台」標籤
• 貼上以下程式碼：

// find the video element (may not work on sites with multiple video elements, but works for most of the main sites)
var vid = document.querySelector("video");

// remove the attribute that might stop us from launching the video in PiP
vid.removeAttribute("disablePictureInPicture");

// finally, request the PiP
vid.requestPictureInPicture();

一切順利，您現在應該可以彈出影片了。如果沒有，您可能需要調整 document.querySelector("video") 以選擇頁面上的特定影片元素。

選項 2 - 建立書籤按鈕以啟動畫中畫

此程式碼與選項 1 中的範例相同，但精簡為一行，以便可以作為 URL 執行。

要使用它，只要：

• 選擇以下所有內容並將其拖放到瀏覽器的書籤列中，或
• 建立一個名為 PiP 的新書籤，並將以下內容貼為書籤的 URL： javascript: var vid=document.querySelector('video');vid.removeAttribute('disablePictureInPicture');vid.requestPictureInPicture();
• 點選書籤啟動畫中畫

「書籤」如何運作？

書籤通常會將您帶到新網頁。小書籤是一種在當前頁面上運行 javascript 的書籤，而不是將您帶到新頁面。要聲明它是一個小書籤，它指向的“位置”以 javascript:.

開頭

—凱西瓦茨

這裡的神奇之處在於將 javascript 加入到 URL 的開頭。這告訴瀏覽器在當前頁面上執行操作，而不是將您帶到新頁面。

有關小書籤的更多資訊以及如何利用它們獲得更多創意，請參閱 @caseywatts 關於製作小​​書籤的精彩解釋

...

原文：https://mothy.dev/posts/free-picture-in-picture

以上是建立您自己的畫中畫影片功能書籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！