視頻中的圖片API

圖片中的圖片（PIP）API使視頻可以在用戶在其他地方導航時在浮動窗口中播放； 1。通過“圖片InpictureEnabled”和Video的DisablePictureInPicture屬性檢查支持； 2。用requestPictureInpicture（）觸發pip pip; 3。處理國家用戶的變化和teverpictureInpicture事件；該功能需要用戶互動，一次只允許一個PIP窗口，具有有限的移動支持，可能排除DRM內容，並且不提供樣式控制，但是當適當使用適當的UI反饋和支持檢查時，可以增強多任務處理。

圖片中的圖片（PIP）是一個方便的功能，可以使用戶能夠在設備上的其他地方導航到其他地方，例如瀏覽另一個頁面或使用其他應用程序。在網絡上，通過圖片中的API啟用了此功能，這是一個相對較新但支持的Web API，使開發人員可以控制<video></video>元素對PIP行為的控制。

這是您需要知道的有效使用它。

PIP API做什麼

圖片中的API允許一個網頁以編程方式輸入和退出PIP模式以獲取視頻。一旦激活，該視頻就會從瀏覽器中彈出到一個留在其他應用程序頂部的小型移動窗口中，從而讓用戶多任務不會中斷播放。

它僅適用於<video></video>元素，並且需要用戶交互才能啟動（出於安全和用戶的經驗原因）。 Chrome，Edge和某些版本的Safari這樣的瀏覽器支持它，但是Firefox和其他版本還沒有。

如何使用PIP API

使用API很簡單。這是關鍵部分：

1。檢查支持和可用性

在嘗試使用PIP之前，請檢查瀏覽器是否支持：

 if（文檔中的'Picture InpictureEnabled'）{
  console.log（'PIP得到支持！'）;
}

您還可以檢查特定視頻是否可以輸入PIP：

如果（！video.disablepictureInpicture）{
  //視頻被允許進入PIP
}

注意：使用<video>標籤上的disablePictureInPicture屬性以防止PIP（如果需要）。

2。請求PIP模式

要輸入PIP，請在視頻元素上調用requestPictureInPicture() ：

異步函數openpip（）{
  嘗試 {
    等待Video.requestPictureInPicture（）;
  } catch（err）{
    Console.Error（“未能輸入PIP：”，ERR）;
  }
}

這必須由用戶手勢（如單擊）觸發，否則將失敗。

3。處理PIP狀態更改

您可以在PIP啟動或結束時收聽：

 Video.AddeventListener（'enterPictureInpicture'，（event）=> {
  console.log（'輸入的pip'）;
  //調整UI，例如，隱藏控件
}）;

Video.AddeventListener（'wellpictureInpicture'，（event）=> {
  console.log（“退出的pip'）;
  //還原UI
}）;

這些事件有助於使您的界面保持同步。

實際示例：添加一個PIP按鈕

<視頻ID =“ myvideo”控件>
  <source src =“ demo.mp4” type =“ video/mp4”>
</video>
<button ID =“ pip button”>切換pip </button>

 const video = document.getElementById（'myvideo'）;
const pip button = document.getElementById（'pip button'）;

pipbutton.addeventlistener（'click'，async（）=> {
  if（document.pictureinpictureelement）{
    //退出如果已經在PIP中
    等待document.exitPictureInpicture（）;
  } 別的 {
    //輸入PIP
    等待Video.requestPictureInPicture（）;
  }
}）;

//在不可用時禁用按鈕
pipButton.disabled =！ document.pictureInPictureEnabled;

這將創建一個尊重當前PIP狀態的簡單切換按鈕。

重要筆記和局限性

• 需要用戶手勢：頁面加載時無法自動啟動PIP。
• 一次只有一個PIP窗口：如果另一個視頻（或應用程序）在PIP中，那麼當前的視頻將退出。
• 移動支持是有限的：由於UI限制，大多數移動瀏覽器不支持PIP。
• 並非所有視頻都可以輸入PIP ：受DRM保護的內容或具有某些限制的視頻可能會被阻止。
• 樣式限制：PIP窗口由OS/瀏覽器控制，因此您無法自定義其外觀。

結論

圖片中的API是一種功能強大但簡單的工具，可增強視頻內容的用戶體驗。通過讓用戶在瀏覽時保持視頻可見，它增加了便利性，尤其是對於教程，視頻或實時流。

周到地使用它：提供明確的控件，尊重用戶意圖，並始終檢查支持。隨著瀏覽器採用的越來越多，PIP已成為現代網絡視頻的標準功能。

基本上，這不是魔術 - 只是一個小型API，使多任務更加順暢。

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