HTTP Permissions-Policy picture-in-picture

Typ

Die picture-in-picture-Direktive steuert den Zugriff auf die Picture-in-Picture API für schwebende Video-Fenster.

Syntax

Die Direktive definiert eine Allowlist für Ursprünge, die PiP-Modus verwenden dürfen.

http 
Permissions-Policy: picture-in-picture=(self)
Permissions-Policy: picture-in-picture=(self "https://player.video-cdn.com")
Permissions-Policy: picture-in-picture=()

Direktiven

Die Direktive unterstützt Standard-Allowlist-Werte für präzise Zugriffssteuerung.

self
Erlaubt Picture-in-Picture nur für das Hauptdokument des gleichen Ursprungs. Eingebettete iFrames von anderen Ursprüngen werden blockiert.
origin-list
Liste von Ursprüngen in Anführungszeichen, z.B. "https://streaming.example.com", die zusätzlich zum Hauptdokument PiP verwenden dürfen. Für Video-Player-Embeds.

Beispiele

Die folgenden Beispiele zeigen typische Anwendungsfälle für Video-Streaming, Webinare und Video-Conferencing.

Video-Streaming mit PiP-Support

Eine Video-Streaming-Plattform erlaubt Picture-in-Picture für Multitasking während Video-Wiedergabe.

http 
HTTP/1.1 200 OK
Content-Type: text/html
Permissions-Policy: picture-in-picture=(self)

<!DOCTYPE html>
<html>
<head><title>Video Platform</title></head>
<body>
  <video id="player" controls src="/video.mp4"></video>
  <button id="pip">Enable PiP</button>
  <script>
    document.getElementById('pip').addEventListener('click', async () => {
      const video = document.getElementById('player');
      await video.requestPictureInPicture();
    });
  </script>
</body>
</html>

Content-Platform mit Embedded-Video-Player

Eine Content-Plattform erlaubt einem eingebetteten Video-Player PiP-Zugriff.

http 
HTTP/1.1 200 OK
Content-Type: text/html
Permissions-Policy: picture-in-picture=(self "https://player.vimeo.com")

<!DOCTYPE html>
<html>
<head><title>Article with Video</title></head>
<body>
  <article>Article content here...</article>
  <iframe src="https://player.vimeo.com/video/12345"
          allow="picture-in-picture"></iframe>
</body>
</html>

REST-API ohne PiP-Support

Ein API-Endpunkt deaktiviert alle Video-Feature-APIs.

http 
HTTP/1.1 200 OK
Content-Type: application/json
Permissions-Policy: picture-in-picture=(), fullscreen=()

{
  "status": "success",
  "video_url": "https://cdn.example.com/video.mp4"
}

Vorteile für die Systemarchitektur

  • Ermöglicht Multitasking-UX mit schwebenden Video-Fenstern
  • Verhindert unerwünschten PiP-Zugriff durch Drittanbieter-iFrames
  • Unterstützt nahtlose Video-Fortsetzung beim Tab-Wechsel
  • Verbessert User-Experience für Video-intensive Anwendungen

Spezifikation

Definiert in der W3C Picture-in-Picture API Spezifikation. Browser-Support variiert. Erfordert User-Gesture für Aktivierung. Automatischer Exit beim Tab-Close.

Weitere Spezifikationen

Permissions-Policy Header, Content-Security-Policy Header