Przed wprowadzeniem interfejsu Document Picture-in-Picture API w oknie Picture-in-Picture można było umieścić tylko element HTML <video>. Ten nowy interfejs API umożliwia otwieranie zawsze aktywnego okna, które można wypełnić dowolną treścią HTML. Jest ona dostępna jako wersja próbna origin od wersji Chrome 111 na komputery.
Nowy interfejs API zapewnia znacznie więcej możliwości niż to dostępne w przypadku interfejsu Picture-in-Picture API dla platformy <video>. Możesz na przykład udostępnić niestandardowe elementy sterujące i dane wejściowe (np. napisy, playlisty, suwak czasu, możliwość polubienia lub nie filmów), aby ulepszyć działanie odtwarzacza wideo w trybie obrazu w obrazie.
Dzięki pełnemu dokumentowi w trybie obrazu w obrazie aplikacje internetowe do rozmów wideo mogą łączyć wiele strumieni wideo w jednym oknie obrazu w obrazie bez konieczności korzystania z hacków na potrzeby obrazu. Mogą też korzystać z niestandardowych elementów sterujących, takich jak wysyłanie wiadomości, wyciszanie innego użytkownika czy podnoszenie ręki.
Ten fragment kodu pokazuje, jak włączyć tryb obrazu w obrazie w przypadku niestandardowego odtwarzacza wideo.
async function togglePictureInPicture() {
// Close Picture-in-Picture window if any.
if (documentPictureInPicture.window) {
documentPictureInPicture.window.close();
return;
}
// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow({
initialAspectRatio: 640 / 360,
copyStyleSheets: true,
});
// Move video to the Picture-in-Picture window.
const video = document.querySelector("#video");
pipWindow.document.body.append(video);
// Listen for the PiP closing event to move the video back.
pipWindow.addEventListener("unload", (event) => {
const videoContainer = document.querySelector("#videoContainer");
const pipVideo = event.target.querySelector("#video");
videoContainer.append(pipVideo);
});
}
Więcej informacji znajdziesz w artykule Obraz w obrazie dla dowolnego elementu, nie tylko dla elementu <video>.
Na tym etapie opinie deweloperów są bardzo ważne, dlatego przesyłajcie problemy na GitHub, dodając sugestie i pytania.