Die Bild-in-Bild-API für Video

PIP-API (BILD-in-Picture) ermöglicht das Video in einem schwimmenden Fenster, während Benutzer anderswo navigieren. 1. Überprüfen Sie die Unterstützung über 'PictureInpictureEnabled' und Video 'DisablePictureInPicture -Attribut von Video; 2.. Trigger Pip mit RequestPictureInPicture () auf Benutzergeste; 3.. Verwandte Zustandsänderungen mit EnterpictureInpicture und LeavePictureInPicture -Ereignissen; Die Funktion erfordert eine Benutzerinteraktion, ermöglicht nur ein PIP -Fenster gleichzeitig, verfügt über eine begrenzte mobile Unterstützung, kann DRM -Inhalte ausschließen und bietet keine Styling -Steuerung, verbessert jedoch Multitasking, wenn sie angemessen mit ordnungsgemäßem UI -Feedback und Support -Checks verwendet werden.

PIP-in-Picture (PIP) ist eine praktische Funktion, mit der Benutzer weiterhin ein Video in einem kleinen, schwimmenden Fenster ansehen können, während sie an anderer Stelle auf ihrem Gerät navigieren-wie das Durchsuchen einer anderen Seite oder die Verwendung einer anderen App. Im Web wird diese Funktionalität durch die Bild-in-Bild-API , eine relativ neue, aber zunehmend unterstützte Web-API, aktiviert, die Entwicklern die Kontrolle über PIP-Verhalten für <video></video> Elemente bietet.

Folgendes müssen Sie wissen, um es effektiv zu verwenden.

Was die PIP -API macht

Mit der Bild-in-Bild-API kann eine Webseite den PIP-Modus für ein Video programmgesteuert eingeben und beenden. Sobald das Video aktiviert ist, steigt das Video aus dem Browser in ein kleines bewegliches Fenster, das auf anderen Apps bleibt und den Benutzern Multitasking ohne Unterbrechung der Wiedergabe zulässt.

Es funktioniert nur mit <video></video> Elementen und erfordert die Interaktion der Benutzer (aus Gründen der Sicherheits- und Benutzererfahrung). Browser wie Chrome, Edge und einige Versionen von Safari unterstützen es, aber Firefox und andere nicht.

So verwenden Sie die PIP -API

Die Verwendung der API ist unkompliziert. Hier sind die wichtigsten Teile:

1. Überprüfen Sie die Unterstützung und Verfügbarkeit

Überprüfen Sie vor dem Versuch, PIP zu verwenden, ob der Browser es unterstützt:

 if ('pictureInpictureEnabled' im Dokument) {
  console.log ('pip wird unterstützt!');
}

Sie können auch überprüfen, ob ein bestimmtes Video PIP eingeben kann:

 if (! Video.isablePictureInPicture) {
  // Video darf in PIP gehen
}

HINWEIS: Verwenden Sie das Attribut disablePictureInPicture auf dem <video> -Tag, um PIP bei Bedarf zu verhindern.

2. PIP -Modus anfordern

Um PIP einzugeben, call requestPictureInPicture() im Videoelement:

 asynchrische Funktion openPip () {
  versuchen {
    Warten Sie Video.RequestPictureInPicture ();
  } catch (err) {
    console.Error ("PIP nicht eingeben:", ERR);
  }
}

Dies muss von einer Benutzergeste ausgelöst werden (wie ein Klick), oder es schlägt fehl.

3. Änderungen des PIP -Zustands bearbeiten

Sie können sich anhören, wenn PIP beginnt oder endet:

 Video.AdDeVentListener ('EnterpictureInPicture', Ereignis) => {
  console.log ('eingegebene PIP');
  // ui, z. B. die Steuerelemente ausblenden
});

Video.AdDeVentListener ('LeavePictureInPicture', (Ereignis) => {
  console.log ('beendet PIP');
  // UI wiederherstellen
});

Diese Ereignisse tragen dazu bei, Ihre Benutzeroberfläche synchron zu halten.

Praktisches Beispiel: Fügen Sie eine PIP -Taste hinzu

 <Video id = "myvideo" steuert>
  <Source Src = "Demo.mp4" Typ = "Video/mp4">
</Video>
<button id = "pipbutton"> Umschalten von Pip </button>

 const Video = document.getElementById ('myvideo');
const pipbutton = document.getElementById ('pipbutton');

pipbutton.addeventListener ('click', async () => {
  if (document.pictureInpictureElement) {
    // Beenden Sie, falls bereits in PIP
    erwarten document.exitpictureInpicture ();
  } anders {
    // Pip eingeben
    Warten Sie Video.RequestPictureInPicture ();
  }
});

// Schaltfläche deaktivieren, wenn PIP nicht verfügbar ist
pipbutton.DISABED =! DOCUMS.PictureInPictureEnabled;

Dadurch wird eine einfache Schaltfläche zum Umschalten erstellt, die den aktuellen PIP -Status respektiert.

Wichtige Anmerkungen und Einschränkungen

• Erforderliche Benutzergeste : Sie können PIP bei einer Seite nicht automatisch starten.
• Nur ein PIP -Fenster gleichzeitig : Wenn sich ein anderes Video (oder eine App) in PIP befindet, wird der aktuelle beendet.
• Der mobile Support ist begrenzt : Die meisten mobilen Browser unterstützen PIP aufgrund von UI -Einschränkungen nicht.
• Nicht alle Videos können PIP eingeben : DRM-geschützte Inhalte oder Videos mit bestimmten Einschränkungen können blockiert werden.
• Styling -Einschränkungen : Das PIP -Fenster wird vom Betriebssystem/Browser gesteuert, sodass Sie sein Erscheinungsbild nicht anpassen können.

Abschluss

Die Bild-in-Bild-API ist ein leistungsstarkes, aber einfaches Tool, um die Benutzererfahrung mit Videoinhalten zu verbessern. Indem Benutzer beim Surfen Videos sichtbar halten, fügt dies die Bequemlichkeit hinzu - insbesondere für Tutorials, Videos oder Live -Streams.

Verwenden Sie es nachdenklich: Geben Sie klare Steuerelemente an, respektieren Sie die Benutzerabsicht und überprüfen Sie immer die Unterstützung. Bei der wachsenden Browser -Akzeptanz wird PIP zu einer Standardfunktion für moderne Webvideos.

Grundsätzlich ist es keine Magie - nur eine kleine API, die Multitasking viel glatter macht.

Das obige ist der detaillierte Inhalt vonDie Bild-in-Bild-API für Video. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!