How to use Facebook embedded video player API in vue3

The Facebook Embedded Video Player API is a client-side functionality provided by the Facebook SDK for JavaScript. You can play Facebook videos on your own website.

Get started

Introduce the Facebook SDK first

<script async defer src="//i2.wp.com/connect.facebook.net/en_US/sdk.js"></script>

Encapsulated into 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" & amp; & amp; 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);
  }
};

// player method
const play = () => player & amp; & amp; player.play();
const pause = () => player & amp; & amp; player. pause();

// player event
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="'fb-' + id"
    class="fb-video"
    :data-href="props.src"
    :data-autoplay="props.autoplay"
    :data-allowfullscreen="false"
  ></div>
</template>

How to use

<facebook-player id="10153231379946729" src="//i2.wp.com/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, be sure to pass a unique id to identify the player.

attribute

Setting	Description	Default
data-href	The absolute URL of the video.	n/a
data-allowfullscreen	Allow 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 (mute). Users can turn on the sound through the video player control option. This setting does not apply to mobile devices. Can be `false` or `true`.	false
data-lazy	`true` means you can set `loading= "lazy"` iframe attribute to use the browser’s lazy loading mechanism. The effect is that if the plugin is not near the viewport, the browser will not display the plugin, and you may never see it. 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	Set to if there is any text in the Facebook post associated with the video`true` to add that text. Applies to desktop sites only.	false
data-show-captions	Set `true` to display subtitles by default ( if applicable). Subtitles are only available on desktop.	false

Method

function	description	parameter (type)
play()	Plays the video.
pause()	Pauses the video.
seek(seconds)	Find the specified location.	`seconds`?(`number`)
mute()	Video is muted.
unmute()	Unmute video.
isMuted()	When the video is muted, it is?`true`, otherwise it is ?`false`.
setVolume(volume)	Set the volume to the specified number (`float`, ranging from ?`0`? to ?`1`).	`volume`?(`float`)
getVolume()	Returns the current volume of the video (`float`, ranging from ?`0`? to ?`1`).
getCurrentPosition()	Returns the current video time position, accurate to seconds.
getDuration()	Returns the video duration, accurate to seconds.
subscribe(event, eventCallback)	Add a listening function for the specified event. For more information on events, see the Events section. Returns a token with a ?`release`? method that, when called, removes the listener from the event again.	`event`?(`string`), `eventCallback`?(`function`)

Event

event	description
startedPlaying	Fired when the video starts playing.
paused	Triggered when the video is paused.
finishedPlaying	Triggered when the video is finished playing.
startedBuffering	Triggered when the video starts buffering.
finishedBuffering	Fired when the video resumes from buffering.
error	Triggered when an error occurs in the video.