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

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

這促使了標(biāo)準(zhǔn)畫中畫Web API的製定，使網(wǎng)站能夠啟動(dòng)和控制此行為。

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

此瀏覽器支持?jǐn)?shù)據(jù)來自Caniuse，其中包含更多詳細(xì)信息。數(shù)字表示瀏覽器在該版本及更高版本中支持此功能。

桌面端

移動(dòng)端/平板電腦

如何使用畫中畫API

讓我們從向網(wǎng)頁添加視頻開始。

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

在Chrome中，已經(jīng)存在用於進(jìn)入和退出畫中畫模式的切換按鈕。

要測試Firefox的實(shí)現(xiàn)，您需要首先在about:config中啟用media.videocontrols.picture-in-picture.enabled標(biāo)誌，然後右鍵單擊視頻以查找畫中畫選項(xiàng)。

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

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

<button id="pipButton" class="hidden" disabled>進(jìn)入畫中畫模式</button>

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

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

默認(rèn)情況下，按鈕是隱藏且禁用的，因?yàn)槲覀冃枰涝谟脩舻臑g覽器中是否支持和啟用了畫中畫API，然後再顯示它。這是一種漸進(jìn)增強(qiáng)形式，有助於避免在不支持此功能的瀏覽器中出現(xiàn)損壞的體驗(yàn)。

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

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

進(jìn)入畫中畫模式

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

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

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

我們不能按原樣保留上面的代碼，因?yàn)閞equestPictureInPicture()返回一個(gè)promise，並且如果例如視頻元數(shù)據(jù)尚未加載或視頻上存在disablePictureInPicture屬性，則promise可能會(huì)被拒絕。

讓我們添加一個(gè)catch塊來捕獲此潛在錯(cuò)誤並讓用戶知道發(fā)生了什麼：

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

退出畫中畫模式

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

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

您可能希望關(guān)閉畫中畫窗口的另一種情況是視頻進(jìn)入全屏模式時(shí)。 Chrome已經(jīng)自動(dòng)執(zhí)行此操作，無需編寫任何代碼。

畫中畫事件

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

這些事件是enterpictureinpicture和leavepictureinpicture，顧名思義，它們分別在視頻進(jìn)入或退出畫中畫模式時(shí)觸發(fā)。

在我們的示例中，我們需要根據(jù)視頻當(dāng)前是否處於畫中畫模式來更新#pipButton標(biāo)籤。

以下是幫助我們實(shí)現(xiàn)此目標(biāo)的代碼：

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

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

這是一個(gè)演示：

自定義畫中畫窗口

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

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

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

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

在畫中畫窗口中顯示網(wǎng)絡(luò)攝像頭饋送

視頻會(huì)議Web應(yīng)用程序可以從在用戶在應(yīng)用程序和其他瀏覽器選項(xiàng)卡或窗口之間切換時(shí)將網(wǎng)絡(luò)攝像頭饋送置於畫中畫模式中受益。

這是一個(gè)示例：

禁用視頻上的畫中畫

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

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

總結(jié)

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

儘管瀏覽器支持現(xiàn)在參差不齊，但您仍然可以使用它作為漸進(jìn)增強(qiáng)網(wǎng)站視頻體驗(yàn)的一種方式。

進(jìn)一步閱讀

• 畫中畫API規(guī)範(fàn)
• 使用畫中畫觀看視頻
• 畫中畫示例（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.

以上是圖片中的圖片網(wǎng)絡(luò)API簡介的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！