圖片中的圖片網絡API簡介

2016年，Safari瀏覽器隨macOS Sierra發布，首次引入了畫中畫功能。這項功能允許用戶將視頻彈出到一個小型的浮動窗口中，該窗口始終位於其他窗口之上，方便用戶在執行其他操作的同時繼續觀看視頻。這一創意源於電視，例如，用戶可能希望在瀏覽節目單或其他頻道時繼續觀看熱門體育賽事。

不久之後，Android 8.0發布，通過原生API支持畫中畫功能。儘管Chrome桌面版尚不支持此功能，但Android版Chrome卻能夠通過此API以畫中畫模式播放視頻。

這促使了標準畫中畫Web API的製定，使網站能夠啟動和控制此行為。

在撰寫本文時，只有Chrome（70版及以上）和Edge（76版及以上）支持此功能。 Firefox、Safari和Opera都使用專有的API來實現其功能。

此瀏覽器支持數據來自Caniuse，其中包含更多詳細信息。數字表示瀏覽器在該版本及更高版本中支持此功能。

桌面端

移動端/平板電腦

如何使用畫中畫API

讓我們從向網頁添加視頻開始。

<video controls="" src="video.mp4"></video>

在Chrome中，已經存在用於進入和退出畫中畫模式的切換按鈕。

要測試Firefox的實現，您需要首先在about:config中啟用media.videocontrols.picture-in-picture.enabled標誌，然後右鍵單擊視頻以查找畫中畫選項。

雖然這有效，但在許多情況下，您希望您的視頻控件在不同瀏覽器中保持一致，並且您可能希望控制哪些視頻可以進入畫中畫模式，哪些視頻不能。

我們可以使用畫中畫Web API用我們自己的方法替換瀏覽器中進入畫中畫模式的默認方法。例如，讓我們添加一個按鈕，單擊該按鈕即可啟用它：

<button id="pipButton" class="hidden" disabled>進入畫中畫模式</button>

然後在JavaScript中選擇視頻和按鈕：

 const video = document.getElementById('video');
const pipButton = document.getElementById('pipButton');

默認情況下，按鈕是隱藏且禁用的，因為我們需要知道在用戶的瀏覽器中是否支持和啟用了畫中畫API，然後再顯示它。這是一種漸進增強形式，有助於避免在不支持此功能的瀏覽器中出現損壞的體驗。

我們可以檢查API是否受支持並啟用按鈕，如下所示：

 if ('pictureInPictureEnabled' in document) {
  pipButton.classList.remove('hidden')
  pipButton.disabled = false;
}

進入畫中畫模式

假設我們的JavaScript已確定瀏覽器啟用了畫中畫支持。當單擊帶有#pipButton的按鈕時，讓我們在視頻元素上調用requestPictureInPicture()。此方法返回一個promise，默認情況下，在解析時，該promise將視頻放置在屏幕右下角的一個迷你窗口中，儘管用戶可以將其移動。

 if ('pictureInPictureEnabled' in document) {
  pipButton.classList.remove('hidden')
  pipButton.disabled = false;

  pipButton.addEventListener('click', () => {
    video.requestPictureInPicture();
  });
}

我們不能按原樣保留上面的代碼，因為requestPictureInPicture()返回一個promise，並且如果例如視頻元數據尚未加載或視頻上存在disablePictureInPicture屬性，則promise可能會被拒絕。

讓我們添加一個catch塊來捕獲此潛在錯誤並讓用戶知道發生了什麼：

 pipButton.addEventListener('click', () => {
  video
    .requestPictureInPicture()
    .catch(error => {
      // 錯誤處理});
});

退出畫中畫模式

瀏覽器貼心地在畫中畫窗口中提供了一個關閉按鈕，單擊該按鈕可以關閉窗口。但是，我們也可以提供另一種退出畫中畫模式的方法。例如，我們可以使單擊我們的#pipButton關閉任何活動的畫中畫窗口。

 pipButton.addEventListener('click', () => {
  if (document.pictureInPictureElement) {
    document
      .exitPictureInPicture()
      .catch(error => {
      // 錯誤處理})
  } else {
    // 請求畫中畫}
});

您可能希望關閉畫中畫窗口的另一種情況是視頻進入全屏模式時。 Chrome已經自動執行此操作，無需編寫任何代碼。

畫中畫事件

瀏覽器允許我們檢測視頻何時進入或離開畫中畫模式。由於畫中畫模式有很多進入或退出的方式，因此最好依賴事件檢測來更新媒體控件。

這些事件是enterpictureinpicture和leavepictureinpicture，顧名思義，它們分別在視頻進入或退出畫中畫模式時觸發。

在我們的示例中，我們需要根據視頻當前是否處於畫中畫模式來更新#pipButton標籤。

以下是幫助我們實現此目標的代碼：

 video.addEventListener('enterpictureinpicture', () => {
  pipButton.textContent = '退出畫中畫模式';
});

video.addEventListener('leavepictureinpicture', () => {
  pipButton.textContent = '進入畫中畫模式';
});

這是一個演示：

自定義畫中畫窗口

瀏覽器默認情況下會在畫中畫窗口中顯示播放/暫停按鈕，除非視頻正在播放MediaStream對象（由虛擬視頻源產生，例如攝像頭、視頻錄製設備、屏幕共享服務或其他硬件源）。

還可以添加直接從畫中畫窗口轉到上一曲目或下一曲目的控件：

 navigator.mediaSession.setActionHandler('previoustrack', () => {
  // 轉到上一曲目});

navigator.mediaSession.setActionHandler('nexttrack', () => {
  // 轉到下一曲目});

在畫中畫窗口中顯示網絡攝像頭饋送

視頻會議Web應用程序可以從在用戶在應用程序和其他瀏覽器選項卡或窗口之間切換時將網絡攝像頭饋送置於畫中畫模式中受益。

這是一個示例：

禁用視頻上的畫中畫

如果您不希望視頻在畫中畫窗口中彈出，可以向其添加disablePictureInPicture屬性，如下所示：

<video controls="" disablepictureinpicture="" src="video.mp4"></video>

總結

目前，這就是您現在需要了解的關於畫中畫Web API的所有內容！目前，API僅支持<video></video>元素，但它也旨在擴展到其他元素。

儘管瀏覽器支持現在參差不齊，但您仍然可以使用它作為漸進增強網站視頻體驗的一種方式。

進一步閱讀

• 畫中畫API規範
• 使用畫中畫觀看視頻
• 畫中畫示例（GitHub上的Google Chrome）

The output maintains the original image and its format. The text has been paraphrased and reorganized for improved flow and clarity while retaining the original meaning. Technical terms are kept consistent.

以上是圖片中的圖片網絡API簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！