Eine Einführung zum Bild-in-Bild-Web-API

0
281

Bild-in-Bild-seinen ersten Auftritt im Internet in den Safari-browser mit der Veröffentlichung von macOS Sierra im Jahr 2016. Es machte es möglich für einen Benutzer ein pop-video in einem kleinen schwebenden Fenster, das bleibt über alle anderen, so dass Sie halten können anschauen, während Sie andere Dinge zu tun. Es ist eine Idee, die kam aus dem TV, wo, zum Beispiel, möchten Sie vielleicht zu halten, beobachten Sie Ihre Beliebte Sport-Event, auch als Sie die Anleitung oder auch andere Kanäle.

Nicht lange danach, Android 8.0 veröffentlicht wurde, die inklusive Bild-in-Bild-Unterstützung, die über native APIs. Chrome für Android war in der Lage, die Wiedergabe von videos im Bild-in-Bild-Modus durch diese API auch wenn sein desktop-Pendant nicht in der Lage war, dies zu tun.

Dies führte zur Ausarbeitung eines standard-Bild-in-Bild-Web-API, die es ermöglicht websites zu initiieren und zu Steuern dieses Verhalten.

Zum Zeitpunkt des Schreibens, nur Chrome (version 70+) und Edge (version 76+), unterstützen diese Funktion. Firefox, Safari und Opera verwenden alle proprietäre APIs für Ihre Implementierungen.

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version und bis.

Desktop

ChromeOperaFirefoxIEEdgeSafari
70 64 72 Keine 76 TP

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
13.3 Keine Keine Keine 78 68

Wie die Bild-In-Bild-API

Lassen Sie uns beginnen, indem Sie ein video auf einer Webseite.

<video controls src=”video.mp4″></video>

In Chrome gibt es bereits ein Umschalter, ein-und aussteigen, Bild-in-Bild-Modus.

Um zu testen, Firefox ist die Durchführung, müssen Sie das aktivieren der Medien.videocontrols.Bild-in-Bild.aktiviert-flag in about:config den ersten, dann mit der rechten Maustaste auf das video, um die Bild-in-Bild-option.

Aktivieren der Bild-in-Bild-im-Firefox

Das funktioniert zwar in vielen Fällen, Sie möchten, dass Ihre video-Steuerelemente konsistent in allen Browsern, und Sie können die Kontrolle über die videos, die eingegeben werden können, Bild-in-Bild-Modus und welche nicht.

Wir können Sie ersetzen die Standard-Methode der Eingabe von Bild-in-Bild-Modus im browser mit unserer eigenen Methode mit der Bild-in-Bild-Web-API. Zum Beispiel, fügen wir eine Schaltfläche, wenn darauf geklickt, können Sie:

<button id=”pipButton” class=”hidden” deaktiviert>Enter Bild-in-Bild-Modus</button>

Dann wählen Sie sowohl die video-und die-Taste, in JavaScript:

const video = document.getElementById(‘video’);
const pipButton = document.getElementById(‘pipButton’);

Die Schaltfläche ist ausgeblendet, und standardmäßig deaktiviert, weil wir wissen müssen, wenn Sie die Bild-in-Bild-API unterstützt wird und aktiviert ist im browser des Benutzers vor der Anzeige des es. Dies ist eine form von progressive enhancement, die hilft zu vermeiden, eine gebrochene Erfahrung in Browsern, die keine Unterstützung für die Funktion.

Wir können überprüfen, dass die API unterstützt wird, und die Schaltfläche aktivieren, wie unten dargestellt:

wenn (‘pictureInPictureEnabled’ in document) {
pipButton.classList.entfernen (“versteckte”)
pipButton.disabled = false;
}

Die Eingabe der Bild-in-Bild-Modus

Lassen Sie uns sagen, dass unser JavaScript-Code ermittelt hat, dass der browser, Bild-in-Bild-Unterstützung aktiviert. Nennen wir requestPictureInPicture() auf das video-element, wenn der button mit #pipButton geklickt wird. Diese Methode gibt ein Versprechen, dass Orte, die das video in einem mini-Fenster auf der rechten unteren Seite des Bildschirms standardmäßig als gelöst, obwohl es bewegt werden kann, um durch den Benutzer.

wenn (‘pictureInPictureEnabled’ in document) {
pipButton.classList.entfernen (“versteckte”)
pipButton.disabled = false;

pipButton.addEventListener(‘click’, () => {
video.requestPictureInPicture();
});
}

Wir können Sie nicht den code von oben, wie ist denn requestPictureInPicture() gibt ein Versprechen und es ist möglich, für das Versprechen, ablehnen, wenn, zum Beispiel, die Metadaten des Videos noch nicht geladen ist oder wenn die disablePictureInPicture-Attribut vorhanden ist, auf dem video.

Fügen Sie einen catch-block zur Erfassung dieser möglichen Fehler und lassen den Benutzer wissen, was Los ist:

pipButton.addEventListener(‘click’, () => {
video
.requestPictureInPicture()
.catch(error => {
// Fehlerbehandlung
});
});

Aufregende Bild-in-Bild-Modus

Der browser hilfreich bietet eine Schaltfläche zum schließen auf das Bild-im-Bild-Fenster, die es ermöglicht, das Fenster zu schließen, wenn darauf geklickt wird. Wir können jedoch auch einen anderen Weg zu verlassen Bild-in-Bild-Modus als auch. Zum Beispiel, die wir machen können, klicken Sie unser #pipButton schließen Sie alle aktiven Bild-in-Bild-Fenster.

pipButton.addEventListener(‘click’, () => {
if (Dokument.pictureInPictureElement) {
Dokument
.exitPictureInPicture()
.catch(error => {
// Fehlerbehandlung
})
} else {
// Anfrage Bild-in-Bild
}
});

Eine andere situation, wo Sie vielleicht wollen, schließen Sie die Bild-in-Bild-Fenster ist, wenn das video tritt in den Vollbild-Modus. Chrome tut dies bereits automatisch, ohne code schreiben.

Bild-in-Bild-Ereignisse

Der browser ermöglicht es uns, zu erkennen, Wann ein video betritt oder verlässt, Bild-in-Bild-Modus. Da gibt es viele Möglichkeiten, Bild-in-Bild-Modus eingegeben werden kann oder beendet wird, ist es besser, sich auf Ereignis-Erkennung, um update-media-Steuerelemente.

Die Veranstaltungen sind enterpictureinpicture und leavepictureinpicture, die, wie Ihre Namen schon andeuten, Feuer, wenn ein video eingibt oder wird beendet, Bild-in-Bild-Modus, beziehungsweise.

In unserem Beispiel müssen wir ein update der #pipButton label, je nachdem, ob das video oder ist nicht aktuell-im-Bild-in-Bild-Modus.

Hier ist der code, der uns hilft, zu erreichen, dass:

video.addEventListener(‘enterpictureinpicture’, () => {
pipButton.textContent = ‘Exit Bild-in-Bild-Modus’;
});

video.addEventListener(‘leavepictureinpicture’, () => {
pipButton.textContent = ‘Geben Sie die Bild-in-Bild-Modus’;
});

Hier ist eine demo davon:

Siehe Stift
Bild-in-Bild demo von Ayooluwa (@ayoisaiah)
auf CodePen.

Anpassen der Bild-in-Bild-Fenster

Der browser zeigt eine play/pause-Taste im Bild-in-Bild-Fensters standardmäßig außer, wenn das video abgespielt wird, ein MediaStream-Objekt (erzeugt durch einen virtuellen video-Quelle, wie eine Kamera, video-Aufnahme-Gerät, Bildschirm-sharing-service, oder andere hardware-Quellen).

Es ist auch möglich, um Steuerelemente hinzuzufügen, gehen Sie zu der vorherigen oder nächsten track direkt aus den Bild-in-Bild-Fenster:

navigator.mediaSession.setActionHandler(‘previoustrack’, () => {
// Gehe zum vorherigen track
});

navigator.mediaSession.setActionHandler(‘nexttrack’, () => {
// Gehen Sie zum nächsten track
});

Die Anzeige eines webcam-feed in einem Bild-im-Bild-Fenster

Video-Konferenz web-Anwendungen profitieren könnten, indem Sie eine webcam-feed-in-Bild-in-Bild-Modus, wenn ein Benutzer wechselt hin und her zwischen der app und anderen browser-tabs oder Fenstern.

Hier ein Beispiel:

Siehe Stift
Display-Webcam-feed-in-Bild-in-Bild-Modus durch Ayooluwa (@ayoisaiah)
auf CodePen.

Deaktivieren der Bild-im-Bild auf video

Wenn Sie nicht möchten, dass ein video, um pop-out in einem Bild-im-Bild-Fensters, können Sie die disablePictureInPicture-Attribut wie folgt:

<video disablePictureInPicture Kontrollen src=”video.mp4>”></video>

Zusammenfassung

Das ist so ziemlich alles, was Sie brauchen, um über die Bild-in-Bild-Web-API zu dieser Zeit! Derzeit ist die API unterstützt nur das <video> – element, aber es soll erweiterbar sein, um andere Elemente als gut.

Obwohl die browser-Unterstützung ist fleckig gerade jetzt, können Sie immer noch verwenden es als einen Weg, um schrittweise eine Verbesserung der video-Erlebnis auf Ihrer website.

Weiter Lesen

  • Bild-in-Bild-API-Spezifikation
  • Sehen Sie Videos mit Bild-in-Bild
  • Bild-in-Bild-Beispiel (von Google Chrome auf GitHub)