How to use Facebook embedded video player API in vue3

Text

The Facebook embedded video player API is a client function provided by the JavaScript version of the Facebook SDK. You can play Facebook videos on your website.

Get started

First introduce Facebook SDK

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

Encapsulate it into the component 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>

How to use

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

Notes

class="fb-video" This class name cannot be removed.

If multiple players are used on a page, a unique ID must be passed to identify the player.

Properties

Settings	Description	Default value
data-href	The absolute URL of the video.	n/a
data-allowfullscreen	Allow the video to play in full screen mode. Can be false or true.	false
data-autoplay	Automatically start playing the video when the page loads. The video will play without sound (muted). Users can turn on sound through the video player controls. This setting doesn't work on mobile devices. Can be false or true.	false
data-lazy	true means you can use the browser's lazy loading mechanism by setting the loading="lazy" iframe attribute. The effect is that if the plug-in is not near the viewport, the browser will not display the plug-in, and you may never see the plug-in. Can be one of true or false (default).	false
data-width	The width of the video container. The minimum value is 220px.	auto
data-show-text	If there is any text in the Facebook post associated with the video, set to true to add that text . Applies to desktop sites only.	false
data-show-captions	Set to true to display subtitles by default (if applicable). Subtitles are only available on desktop devices.	false

Method

##FunctionDescriptionParameters (type)play()Play the video. pause()Pause the video. seek(seconds)Search for the specified location. seconds (number)mute()Set the video to mute. unmute()Unmute the video. ##isMuted()setVolume(volume)getVolume()getCurrentPosition()getDuration()subscribe(event, eventCallback)##Event

True when the video is set to mute, false otherwise.
Sets the volume to the specified number (float, ranging from 0 to 1).	volume (float)
Returns the current volume of the video (float, ranging from 0 to 1).
Returns the current video time position, accurate to seconds.
Returns the video duration, accurate to seconds.
Add a listening function for the specified event. For more information about events, see the Events section. Returns a password containing a release method, calling this method will remove the listener from the event again.	event (string), eventCallback (function)

##EventDescriptionFired when the video starts playing. Fires when the video is paused. Triggered when the video is finished playing. Fired when the video starts buffering. Fired when the video resumes from buffering. Triggered when an error occurs in the video.

	startedPlaying
	paused
	finishedPlaying
	startedBuffering
	finishedBuffering
	error

The above is the detailed content of How to use Facebook embedded video player API in vue3. For more information, please follow other related articles on the PHP Chinese website!