Comment utiliser l'API du lecteur vidéo intégré de Facebook dans vue3

Text

L'API du lecteur vidéo intégré Facebook est une fonction client fournie par la version JavaScript du SDK Facebook. Vous pouvez lire des vidéos Facebook sur votre site Web.

Commencez à utiliser

Introduisez d'abord le SDK Facebook

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

Encapsulez-le dans un composant FacebookPlayer

<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>

Comment l'utiliser# 🎜🎜#

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

Note

class="fb-video" Ce nom de classe ne peut pas être supprimé.

Si plusieurs joueurs sont utilisés sur une page, un identifiant unique doit être transmis pour identifier le joueur. # 🎜🎜 ## 🎜🎜 # Propriétés # 🎜🎜 ## 🎜🎜 ## 🎜🎜 ## 🎜🎜 ## 🎜🎜 # Paramètres # 🎜🎜 ## 🎜🎜 # Description # 🎜🎜 ## 🎜🎜 # Valeur par défaut # 🎜🎜#

data-href

L'URL absolue de la vidéo. n/adata-allowfullscreen Autoriser la lecture des vidéos en mode plein écran. Peut être faux ou vrai. falsedata-autoplayDémarre automatiquement la lecture de la vidéo lorsque la page se charge. La vidéo sera lue sans son (en sourdine). Les utilisateurs peuvent activer le son via les commandes du lecteur vidéo. Ce paramètre ne fonctionne pas sur les appareils mobiles. Peut être faux ou vrai. falsedata-lazytrue signifie que vous pouvez définir l'attribut iframeloading="lazy". Utilisez le mécanisme de chargement paresseux du navigateur. L'effet est que si le plug-in n'est pas à proximité de la fenêtre, le navigateur n'affichera pas le plug-in et vous risquez de ne jamais le voir. Peut être vrai ou faux (par défaut). falsedata-widthLa largeur du conteneur vidéo. La valeur minimale est de 220 px. S'il y a du texte dans la publication Facebook associée à la vidéo, définissez-le sur true pour ajouter ce texte. S'applique uniquement aux sites de bureau. falsedata-show-captionsDéfini sur true pour afficher les sous-titres par défaut (le cas échéant) . Les sous-titres ne sont disponibles que sur les appareils de bureau. false

		method
#🎜 🎜# Fonction	Description	Paramètre (type)
play()	Play vidéo.

pause()

Mettre la vidéo en pause. Recherchez l'emplacement spécifié. La vidéo est en sourdine. Réactivez le son de la vidéo. est vrai lorsque la vidéo est réglée sur muet, sinon c'est faux. Règle le volume sur le nombre spécifié (float, allant de 0 à 1). Renvoie le volume actuel de la vidéo (float, allant de 0 à 1). Renvoie la position temporelle actuelle de la vidéo, avec une précision en secondes. Renvoie la durée de la vidéo, avec une précision en secondes. Ajouter une fonction d'écoute pour l'événement spécifié . Pour plus d'informations sur les événements, consultez la section Événements. Renvoie un mot de passe contenant une méthode release, l'appel de cette méthode supprimera à nouveau l'écouteur de l'événement. Event Description startedPlayingSe déclenche lorsque la vidéo est en pause.

		seek(seconds)
secondes (nombre)		mute()
		unmute()
		isMuted()
		setVolume(volume)
volume (float)		getVolume()
		getCurrentPosition()
		getDuration()
		subscribe(event, eventCallback)
event (chaîne), eventCallback (fonction)		event
Déclenché lorsque la lecture de la vidéo commence.		paused

finishedPlayingDéclenché lorsque la lecture de la vidéo est terminée. Déclenché lorsque la vidéo commence à être mise en mémoire tampon. Déclenché lorsque la vidéo reprend de la mise en mémoire tampon. Déclenché lorsqu'une erreur se produit dans la vidéo.

	startedBuffering
	finishedBuffering
	error

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!