Przed wprowadzeniem interfejsu Document Picture-in-Picture API element HTML <video>
można było umieszczać w oknie obrazu w obrazie. Ten nowy interfejs API umożliwia otwieranie zawsze aktywnego okna, które można wypełnić dowolną treścią HTML. Jest ona dostępna w ramach wersji próbnej origin dostępnej w Chrome 111 na komputerze.
![Okno w trybie obraz w obrazie, które odtwarza zwiastun z kanału Sintel.](https://developer.chrome.com/static/blog/the-future-of-picture-in-picture/image/a-picture-picture-window-457c5c468d28f.png?authuser=9&hl=pl)
Nowy interfejs API zapewnia znacznie więcej możliwości niż to dostępne w przypadku interfejsu Picture-in-Picture API dla platformy <video>
. Na przykład możesz udostępniać niestandardowe elementy sterujące i elementy wejściowe (np. napisy, playlisty, suwak czasu, głosować na tak i „Nie podoba mi się”) w odtwarzaczu obrazu w obrazie.
Dzięki funkcji obrazu w obrazie w pełnym rozmiarze aplikacje internetowe do rozmów wideo mogą łączyć wiele strumieni wideo w jedno okno obrazu w obrazie bez konieczności polegania na aplikacjach typu Canvas. Mogą też udostępniać własne opcje, takie jak wysyłanie wiadomości, wyciszanie innego użytkownika czy podniesienie ręki.
Fragment kodu poniżej pokazuje, jak włączyć obraz w obrazie w niestandardowym odtwarzaczu 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);
});
}
Aby dowiedzieć się więcej, obejrzyj film o funkcji Obraz w obrazie dla dowolnego elementu, a nie tylko <video>.
Opinie deweloperów są na tym etapie bardzo ważne, więc zgłaszaj problemy na GitHubie, przesyłając sugestie i pytania.
Baner powitalny: Jakob Owens.