So verwenden Sie die eingebettete Facebook-Videoplayer-API in vue3

Text

Die von Facebook eingebettete Videoplayer-API ist eine Clientfunktion, die von der JavaScript-Version des Facebook SDK bereitgestellt wird. Sie können Facebook-Videos auf Ihrer Website abspielen.

Erste Schritte

Führen Sie zunächst das Facebook SDK ein

<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

Kapseln Sie es in die FacebookPlayer-Komponente

<script setup>
import { onMounted, onBeforeUnmount } from "vue";
const props = defineProps({
  id: { type: String, default: "" },
  src: { type: String, required: true },
  autoplay: { type: Boolean, default: false }
});
const emit = defineEmits(["onEnded", "onPlay", "onPause"]);
onMounted(() => {
  fbAsyncInit();
  loadPlayer();
});
onBeforeUnmount(() => {
  removePlay();
  removePaused();
  removeEnded();
  player = null;
});
// Load Facebook SDK for JavaScript
const fbAsyncInit = () => {
  try {
    window.FB.init({ autoLogAppEvents: true, xfbml: true, version: "v3.2" });
  } catch (error) {
    console.error("FB.init Error", error);
  }
};
// Get Embedded Video Player API Instance
let player = null;
const loadPlayer = () => {
  try {
    window.FB.Event.subscribe("xfbml.ready", (msg) => {
      if (msg.type === "video" && msg.id === `fb-${props.id}`) {
        if (!player) player = msg.instance;
        onPlay(msg.instance);
        onPaused(msg.instance);
        onEnded(msg.instance);
      }
    });
  } catch (error) {
    console.error("FB.Event Error", error);
  }
};
// 播放器方法
const play = () => player && player.play();
const pause = () => player && player.pause();
// 播放器事件
let playListener;
const onPlay = (instance) => {
  playListener = instance.subscribe("startedPlaying", () => emit("onPlay"));
};
const removePlay = () => {
  try {
    if (playListener) playListener.release("startedPlaying");
  } catch (error) {}
};
let pausedListener;
const onPaused = (instance) => {
  pausedListener = instance.subscribe("paused", () => emit("onPause"));
};
const removePaused = () => {
  try {
    if (pausedListener) pausedListener.release("paused");
  } catch (error) {}
};
let endedListener;
const onEnded = (instance) => {
  endedListener = instance.subscribe("finishedPlaying", () => emit("onEnded"));
};
const removeEnded = () => {
  try {
    if (endedListener) endedListener.release("finishedPlaying");
  } catch (error) {}
};
</script>
<template>
  <div
    :id="&#39;fb-&#39; + id"
    class="fb-video"
    :data-href="props.src" rel="external nofollow" 
    :data-autoplay="props.autoplay"
    :data-allowfullscreen="false"
  ></div>
</template>

Verwendung

<facebook-player id="10153231379946729" src="https://www.facebook.com/facebook/videos/10153231379946729/"></facebook-player>

Notizen

class="fb-video" Dieser Klassenname kann nicht entfernt werden.

Wenn mehrere Player auf einer Seite verwendet werden, muss eine eindeutige ID übergeben werden, um den Player zu identifizieren.

Eigenschaft

Einstellungen	Beschreibung	Standard
data-href	Die absolute URL des Videos.	n/a
data-allowfullscreen	Ermöglicht die Wiedergabe von Videos im Vollbildmodus. Kann falsch oder wahr sein.	false
data-autoplay	Automatisch mit der Wiedergabe des Videos beginnen, wenn die Seite geladen wird. Das Video wird ohne Ton abgespielt (stummgeschaltet). Benutzer können den Ton über die Steuerelemente des Videoplayers einschalten. Diese Einstellung funktioniert nicht auf Mobilgeräten. Kann falsch oder wahr sein.	false
data-lazy	true bedeutet, dass Sie den Lazy-Loading-Mechanismus des Browsers verwenden können, indem Sie das Iframe-Attribut „loading="lazy" festlegen. Dies hat zur Folge, dass der Browser das Plug-in nicht anzeigt, wenn es sich nicht in der Nähe des Ansichtsfensters befindet und Sie das Plug-in möglicherweise nie sehen. Kann wahr oder falsch sein (Standard).	false
data-width	Die Breite des Videocontainers. Der Mindestwert beträgt 220 Pixel.	auto
data-show-text	Wenn der mit dem Video verknüpfte Facebook-Beitrag Text enthält, setzen Sie ihn auf „true“, um diesen Text hinzuzufügen. Gilt nur für Desktop-Sites.	false
data-show-captions	Auf true setzen, um Untertitel standardmäßig anzuzeigen (falls zutreffend). Untertitel sind nur auf Desktop-Geräten verfügbar.	false

Methode

Funktion	Beschreibung	Parameter (Typ)
play()	Spielen Sie das Video ab.
pause()	Pause das Video.
seek(seconds)	Suchen Sie nach dem angegebenen Ort.	Sekunden (Anzahl)
mute()	Video stumm schalten.
unmute()	Schalten Sie die Stummschaltung des Videos auf.
isMuted()	ist wahr, wenn das Video stummgeschaltet ist, andernfalls falsch.
setVolume(volume)	Setzt die Lautstärke auf die angegebene Zahl (Float, im Bereich von 0 bis 1).	volume (float)
getVolume()	Gibt die aktuelle Lautstärke des Videos zurück (float, im Bereich von 0 bis 1).
getCurrentPosition()	Gibt die aktuelle Videozeitposition zurück, sekundengenau.
getDuration()	Gibt die Videodauer sekundengenau zurück.
subscribe(event, eventCallback)	Fügen Sie eine Abhörfunktion für das angegebene Ereignis hinzu. Weitere Informationen zu Ereignissen finden Sie im Abschnitt „Ereignisse“. Gibt ein Passwort zurück, das eine Release-Methode enthält. Durch den Aufruf dieser Methode wird der Listener wieder aus dem Ereignis entfernt.	event (string), eventCallback (function)

Event

Event	Description
startedPlaying	Wird ausgelöst, wenn die Wiedergabe des Videos beginnt.
Pause	Wird ausgelöst, wenn das Video angehalten wird.
fertige Wiedergabe	Wird ausgelöst, wenn die Wiedergabe des Videos beendet ist.
startedBuffering	Wird ausgelöst, wenn das Video mit der Pufferung beginnt.
finishedBuffering	Wird ausgelöst, wenn das Video die Pufferung fortsetzt.
Fehler	Wird ausgelöst, wenn im Video ein Fehler auftritt.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die eingebettete Facebook-Videoplayer-API in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!