JavaScript Picture-in-Picture API

Jako velký fanoušek médií na webu jsem vždy nadšený z vylepšení, jak můžeme naše média ovládat. Možná mě nadchnou jednoduché věci, jako je <video> tag a jeho přidružené prvky a atributy, protože média na webu začínala s vlastními kodeky, rozšířeními prohlížeče a Flash. Nejnovější úžasná mediální funkce, ze které jsem na webu nadšený, je obraz v obraze, nativní webové rozhraní API, které zobrazuje ukotvené video. Pojďme se podívat, jak to funguje!

Zobrazit ukázku

Výhody obrazu v obraze

Před použitím funkce Obraz v obraze je důležité vědět, proč ji používat a jaké výhody získáte:

  • Když uživatel posouvá, není třeba vytvářet vlastní dokovaný prvek videa – prohlížeč to udělá za vás!
  • Velký výkon, použitelnost a údržba
  • Ukotvené video se zobrazuje nad všemi kartami v prohlížeči, nejen nad kartou, na které bylo spuštěno
  • Zůstane v režimu PiP, dokud nezměníte stránky

Podpora detekce obrazu v obraze

Před použitím jakéhokoli rozhraní API je nejlepší se ujistit, že je funkce podporována a povolena; za to prohlížeč odhaluje document.pictureInPictureEnabled a také atribut pro video:

if(
    document.pictureInPictureEnabled && 
    !videoElement.disablePictureInPicture
) {
    // Yay, we can use the feature!
}

S prohlížečem podporujícím API je čas začít!

Spuštění obrazu v obraze

Před spuštěním obrazu v obraze je důležité nejprve zkontrolovat, zda již nejsme v obraze:

if(!document.pictureInPictureElement) {
    videoElement.requestPictureInPicture();
}

Jakmile potvrdíme, že se PiP nepoužívá, můžeme spustit PiP voláním requestPictureInPicture() na HTMLVideoElement .

Ukončení obrazu v obraze

Chcete-li ukončit režim obraz v obraze, můžete zavolat exitPictureInPicture() :

document.exitPictureInPicture();

Okno PiP bude odstraněno ze spodní části vašeho prohlížeče.

Bezpečná funkce obraz v obraze

Spojením poskytnutých ukázek kódu můžeme sestavit bezpečnou obslužnou funkci Picture-in-Picture:

function enterPictureInPicture(videoElement) {
    if(
        document.pictureInPictureEnabled && 
        !videoElement.disablePictureInPicture) {
            try {
                if (document.pictureInPictureElement) {
                    document.exitPictureInPicture();
                }
                videoElement.requestPictureInPicture();
            } catch(err) {
                console.error(err);
            }
    }
}

Tato funkce může bezpečně převést vaše video do režimu Picture-in-Picture a zároveň vás ochránit před chybami nebo videi, která již mají obraz v obraze.

Události typu obraz v obraze

Spolu s funkcí pro vstup a ukončení Picture-in-Picture se během každého kroku vygeneruje sada událostí JavaScriptu:

  • enterpictureinpicture :spuštěno na HTMLVideoElement který byl umístěn do obrazu v obraze
  • leavepictureinpicture :spuštěno na HTMLVideoElement pro který byl PiP ukončen

Zde je rychlý příklad každého:

$("#myVideo").addEventListener("enterpictureinpicture", e => {
    // Entered PiP!
});

$("#myVideo").addEventListener("leavepictureinpicture", e => {
    // Exited PiP!
});
Zobrazit ukázku

Režim Picture-in-Picture je úžasné rozhraní API, které uživatelům umožňuje sledovat videoobsah při procházení jiných karet nebo při pouhém procházení vaší stránky. Ve spojení s scroll nebo dokonce s rozhraním Intersection Observer API, obraz v obraze je výkonná funkce, kterou si vaši uživatelé zamilují!