Przed wprowadzeniem interfejsu Document Picture-in-Picture API można było umieszczać w oknie obrazu w obrazie tylko element HTML <video>
. Ten nowy interfejs API umożliwia otwieranie zawsze na wierzchu okna, które może zostać wypełnione dowolną treścią HTML. Jest dostępna w ramach wersji próbnej origin w Chrome 111 na komputerach.
Nowy interfejs API zapewnia znacznie więcej niż dotychczasowy interfejs Picture-in-Picture API dla <video>
. Możesz na przykład udostępnić niestandardowe elementy sterujące i dane wejściowe (takie jak napisy, playlisty, pasek czasu odtwarzania, oznaczenie filmu jako „Podoba mi się” i „To mi się nie podoba”), aby zwiększyć wygodę użytkowników korzystających z funkcji wyświetlania obrazu w obrazie.
Dzięki funkcji „Dokument w obrazie w obrazie” aplikacje internetowe do rozmów wideo mogą łączyć kilka strumieni wideo w jedno okno, w którym nie trzeba korzystać z funkcji Canvas. Mogą też udostępniać niestandardowe elementy sterujące, takie jak wysyłanie wiadomości, wyciszanie innych użytkowników czy podniesienie ręki.
Poniższy fragment kodu 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, skorzystaj z funkcji Obraz w obrazie dla dowolnego elementu, a nie tylko dla <video>.
Opinie deweloperów są na tym etapie bardzo ważne, dlatego zachęcamy do zgłaszania problemów na GitHubie wraz z sugestiami i pytaniami.
Baner powitalny: Jakob Owens.