Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/de/docs/Web/API/Picture-in-Picture_API below:

Picture-in-Picture API - Web-APIs | MDN

Limited availability

Die Picture-in-Picture API ermöglicht es Websites, ein schwebendes, immer im Vordergrund stehendes Videofenster zu erstellen. Dies erlaubt es den Nutzern, weiterhin Medien zu konsumieren, während sie mit anderen Websites oder Anwendungen auf ihrem Gerät interagieren.

Hinweis: Die Document Picture-in-Picture API erweitert die Picture-in-Picture API, um zu ermöglichen, dass das immer im Vordergrund stehende Fenster mit beliebigem HTML-Inhalt gefüllt wird, nicht nur mit einem Video.

PictureInPictureWindow

Repräsentiert das schwebende Videofenster; enthält die Eigenschaften width und height sowie eine onresize Event-Handler-Eigenschaft.

PictureInPictureEvent

Repräsentiert ereignisbezogene Ereignisse im Bild-im-Bild-Modus, einschließlich enterpictureinpicture, leavepictureinpicture und resize.

Die Picture-in-Picture API fügt den Schnittstellen HTMLVideoElement und Document Methoden hinzu, um das schwebende Videofenster ein- und auszuschalten.

HTMLVideoElement.requestPictureInPicture()

Fordert den User-Agent auf, das Video in den Bild-im-Bild-Modus zu versetzen.

Document.exitPictureInPicture()

Fordert den User-Agent auf, das im Bild-im-Bild-Modus befindliche Element zurück in seinen ursprünglichen Kasten zurückzugeben.

Die Picture-in-Picture API erweitert die Schnittstellen HTMLVideoElement, Document und ShadowRoot mit Eigenschaften, die verwendet werden können, um festzustellen, ob der Modus des schwebenden Videofensters unterstützt und verfügbar ist, ob der Bild-im-Bild-Modus derzeit aktiv ist und welches Video schwebt.

HTMLVideoElement.disablePictureInPicture

Die disablePictureInPicture-Eigenschaft gibt dem User-Agent einen Hinweis, den Bild-im-Bild-Modus den Nutzern nicht vorzuschlagen oder automatisch anzufordern.

Document.pictureInPictureEnabled

Die pictureInPictureEnabled-Eigenschaft zeigt an, ob es möglich ist, den Bild-im-Bild-Modus zu aktivieren. Dies ist false, wenn der Bild-im-Bild-Modus aus irgendeinem Grund nicht verfügbar ist (z.B. wenn das "picture-in-picture"-Feature nicht erlaubt wurde oder der Modus nicht unterstützt wird).

Document.pictureInPictureElement / ShadowRoot.pictureInPictureElement

Die pictureInPictureElement-Eigenschaft gibt an, welches Element derzeit im schwebenden Fenster (oder im Shadow DOM) angezeigt wird. Ist dies null, hat das Dokument (oder das Shadow DOM) derzeit keinen Knoten im Bild-im-Bild-Modus.

Die Picture-in-Picture API definiert drei Ereignisse, die verwendet werden können, um zu erkennen, wann der Bild-im-Bild-Modus umgeschaltet wird und wann das schwebende Videofenster die Größe ändert.

enterpictureinpicture

Wird an ein HTMLVideoElement gesendet, wenn es in den Bild-im-Bild-Modus wechselt.

leavepictureinpicture

Wird an ein HTMLVideoElement gesendet, wenn es den Bild-im-Bild-Modus verlässt.

resize

Wird an ein PictureInPictureWindow gesendet, wenn es die Größe ändert.

Wenn Medienaktions-Handler über die Media Session API gesetzt wurden, werden vom Browser entsprechende Steuerelemente für diese Aktionen zum Bild-im-Bild-Overlay hinzugefügt. Wenn beispielsweise eine "nexttrack"-Aktion gesetzt wurde, könnte in der Bild-im-Bild-Ansicht eine Überspringen-Schaltfläche angezeigt werden. Es gibt keine Unterstützung für das Hinzufügen benutzerdefinierter HTML-Schaltflächen oder Steuerungen.

Die :picture-in-picture CSS Pseudo-Klasse stimmt mit dem Videoelement überein, das sich derzeit im Bild-im-Bild-Modus befindet, sodass Sie Ihre Stylesheets so konfigurieren können, dass Größe, Stil oder Layout des Inhalts automatisch angepasst werden, wenn ein Video zwischen Bild-im-Bild- und traditionellem Präsentationsmodus wechselt.

Die Verfügbarkeit des Bild-im-Bild-Modus kann mithilfe der Permissions Policy gesteuert werden. Das Bild-im-Bild-Modus-Feature wird durch den String "picture-in-picture" identifiziert, mit einem standardmäßigen Allowlist-Wert von *, was bedeutet, dass der Bild-im-Bild-Modus in obersten Dokumentenkontexten sowie in verschachtelten Browsing-Kontexten, die aus dem gleichen Ursprung wie das oberste Dokument geladen wurden, erlaubt ist.

In diesem Beispiel haben wir ein <video>-Element auf einer Webseite, einen <button> zum Umschalten des Bild-im-Bild-Modus und ein Element, um Informationen zu protokollieren, die für das Beispiel relevant sind. Das <button>-Element ist zunächst disabled, bis wir die Browserunterstützung ermittelt haben.

<video
  src="/shared-assets/videos/friday.mp4"
  id="video"
  muted
  controls
  loop
  width="300"></video>

<button id="pip-button" disabled>Toggle PiP</button>
<pre id="log"></pre>

body {
  font:
    14px "Open Sans",
    sans-serif;
  padding: 0.5em;
}

button {
  display: block;
  margin-block: 1rem;
}

Wir prüfen zuerst, ob der Browser PiP mit document.pictureInPictureEnabled unterstützt. Wenn es nicht unterstützt wird, protokollieren wir diese Information im <pre>-Element. Wenn es im Browser verfügbar ist, können wir das Umschalten zum Ein- und Aussteigen in PiP aktivieren.

Für die Steuerelemente ruft ein Ereignis-Listener am <button>-Element eine Funktion togglePictureInPicture() auf, die wir definiert haben. In togglePictureInPicture() prüft eine if-Anweisung den Wert des pictureInPictureElement-Attributes des document.

• Wenn der Wert null ist, ist kein Video in einem schwebenden Fenster, sodass wir das Video anfordern können, in den Bild-im-Bild-Modus einzutreten. Das tun wir, indem wir HTMLVideoElement.requestPictureInPicture() am <video>-Element aufrufen.
• Wenn der Wert nicht null ist, befindet sich derzeit ein Element im Bild-im-Bild-Modus. Wir können dann document.exitPictureInPicture() aufrufen, um das Video zurück in seinen ursprünglichen Kasten zu bringen und den Bild-im-Bild-Modus zu beenden.

const video = document.getElementById("video");
const pipButton = document.getElementById("pip-button");
const log = document.getElementById("log");

if (document.pictureInPictureEnabled) {
  pipButton.removeAttribute("disabled");
} else {
  log.innerText = "PiP not supported. Check browser compatibility for details.";
}

function togglePictureInPicture() {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  } else {
    video.requestPictureInPicture();
  }
}

pipButton.addEventListener("click", togglePictureInPicture);

:picture-in-picture {
  outline: 5px dashed green;
}

Das Klicken auf die "Toggle PiP"-Schaltfläche ermöglicht es dem Nutzer, zwischen dem Abspielen des Videos auf der Seite und in einem schwebenden Fenster umzuschalten:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4