Dieses Dokument wurde aktualisiert.
Die Übersetzung ins Deutsche ist noch nicht fertig.

Englisch aktualisiert: 23.12.2019

Eingebettete Videoplayer API

Mit der eingebetteten Videoplayer API kannst du den eingebetteten Videoplayer steuern und vom Player ausgelöste Events beobachten. Du kannst beispielsweise auf das Event warten, wenn ein Video angehalten wird, oder die Videowiedergabe mit einem benutzerdefinierten Button starten.

Folge dazu diesen Anweisungen.

Setup
Steuerelemente für Player
Events abonnieren
Referenz zu Steuerelementen für Player

Setup

1. Plugin konfigurieren

Lies die Dokumentation zum eingebetteten Videoplayer, um zu erfahren, wie du das Plug-in einrichtest.

2. Eingebettete Videoplayer API-Instanz erhalten

Um die eingebetteten Videoplayer API-Instanz zu erhalten, suche nach xfbml.ready. Wenn der type der Nachricht video lautet, wurde das Event ready vom eingebetteten Videoplayer ausgelöst.

var my_video_player;
FB.Event.subscribe('xfbml.ready', function(msg) {
  if (msg.type === 'video') {
    my_video_player = msg.instance;
  }
});

3. Vollständiges Codebeispiel

Das folgende Codebeispiel setzt voraus, dass du eine App-ID beim Initialisieren des Facebook-SDK für JavaScript verwendest. Wenn du noch keine App-ID besitzt, lies dir die Dokumentation zum Erstellen einer App-ID durch.

Ersetze im folgenden Codebeispiel {your-app-id} durch deine App-ID und data-href durch deine Video-URL. Denke daran, nach dem Event xfbml.ready zu suchen, nachdem du die Funktion FB.init() aufgerufen hast.

<html>
<head>
  <title>Your Website Title</title>
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '{your-app-id}',
        xfbml      : true,
        version    : 'v3.2'
      });
    
      // Get Embedded Video Player API Instance
      var my_video_player;
      FB.Event.subscribe('xfbml.ready', function(msg) {
        if (msg.type === 'video') {
          my_video_player = msg.instance;
        }
      });
    };
  </script>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

  <!-- Your embedded video player code -->
  <div  
    class="fb-video" 
    data-href="https://www.facebook.com/facebook/videos/10153231379946729/" 
    data-width="500" 
    data-allowfullscreen="true"></div>

</body>
</html>

Verwendung mehrerer Player

Wenn du mehrere Player auf einer Seite verwendest, kannst du einen Videoplayer identifizieren, indem du ein id-Attribut zum Videoplayer-Tag hinzufügst und nach seiner id im msg-Objekt suchst:

<div id="my-video-player-id" ... />
<script>
FB.Event.subscribe('xfbml.ready', function(msg) {
  if (msg.type === 'video' && msg.id === 'my-video-player-id') {
     // True for <div id="my-video-player-id" ...
     my_video_player = msg.instance;
  }
});
</script>

Steuerelemente für Player

Du kannst eine Reihe von Funktionen aufrufen, um deinen Videoplayer zu steuern oder seinen aktuellen Status abzurufen, wie z. B. die aktuelle Wiedergabeposition.

Nutzungsbeispiele

// Start video playback
my_video_player.play();

// Check whether video is muted
if (my_video_player.isMuted()) {
  // Video is muted
}

// Jump to second 5 of the video
my_video_player.seek(5);

Referenz zu Steuerelementen für Player

Abonnieren von Events

Die Funktion subscribe() fügt eine Listener-Funktion für ein angegebenes Event hinzu, wie z. B. startedPlaying.

var myEventHandler = my_video_player.subscribe('startedPlaying', function(e) {
  // Video started playing ...
});

Entfernen von Event-Abonnements

Die Funktion subscribe() gibt einen Schlüssel mit einer release-Methode zurück, bei deren Aufruf der Listener wieder vom Event entfernt wird.

myEventHandler.release('startedPlaying');

Event-Referenz

Referenz zu Steuerelementen für Player

Du kannst eine Reihe von Funktionen aufrufen, um deinen Videoplayer zu steuern oder seinen aktuellen Status abzurufen, wie z. B. die aktuelle Wiedergabeposition.

Funktion	Beschreibung	Argumente (Typ)
`play()`	Spielt das Video ab.
`pause()`	Hält das Video an.
`seek(seconds)`	Sucht die angegebene Position.	`seconds` (`number`)
`mute()`	Schaltet das Video stumm.
`unmute()`	Hebt die Stummschaltung des Videos auf.
`isMuted()`	`true`, wenn das Video stummgeschaltet ist, andernfalls `false`.
`setVolume(volume)`	Stellt die angegebene Lautstärke ein (`float` zwischen `0` und `1`).	`volume` (`float`)
`getVolume()`	Gibt die aktuelle Lautstärke des Videos zurück (`float` zwischen `0` und `1`).
`getCurrentPosition()`	Gibt die aktuelle Videoposition in Sekunden zurück.
`getDuration()`	Gibt die Videodauer in Sekunden zurück.
`subscribe(event, eventCallback)`	Fügt eine Listener-Funktion für das angegebene Event hinzu. Einzelheiten zu Events findest du im Abschnitt Abonnieren von Events. Gibt einen Schlüssel mit einer `release`-Methode zurück, bei deren Aufruf der Listener wieder vom Event entfernt wird.	`event` (`string`), `eventCallback` (`function`)

Event-Referenz

Event	Beschreibung
`startedPlaying`	Wird ausgelöst, wenn die Videowiedergabe gestartet wird.
`paused`	Wird ausgelöst, wenn das Video angehalten wird.
`finishedPlaying`	Wird ausgelöst, wenn die Videowiedergabe beendet ist.
`startedBuffering`	Wird ausgelöst, wenn die Videopufferung gestartet wird.
`finishedBuffering`	Wird ausgelöst, wenn das Video nach der Pufferung wiederhergestellt wird.
`error`	Wird ausgelöst, wenn ein Fehler im Video auftritt.