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="'fb-' + 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
| Description | Parameters (type) | |
|---|---|---|
| Play the video. | ||
| Pause the video. | ||
| Search for the specified location. | seconds (number) | |
| Set the video to mute. | ||
| Unmute the video. | ||
| 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) |
| 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!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
How to learn Laravel How to learn Laravel for free
Apr 18, 2025 pm 12:51 PM
Want to learn the Laravel framework, but suffer from no resources or economic pressure? This article provides you with free learning of Laravel, teaching you how to use resources such as online platforms, documents and community forums to lay a solid foundation for your PHP development journey from getting started to master.
Binance Trading App Official Website Download Portal Binance Trading App Official Website
Apr 24, 2025 pm 02:18 PM
To safely access the Binance official platform and download the APP, you can use the following steps: 1) Use a trusted search engine to search for "Binance" and check the domain name; 2) View the official social media to obtain the URL; 3) Consult the official customer service to confirm the URL; 4) Use a trusted navigation website. The steps to download the APP include: 1) Visit Binance official website; 2) Find the APP download portal; 3) Select the download method (scan the QR code, download the app store, and directly download the APK file).
A summary of the top ten virtual currency trading platforms
Apr 21, 2025 am 09:33 AM
This article summarizes the information of the top ten virtual currency trading platform APPs, emphasizes the importance of secure access to the platform through official channels, and provides verification methods. At the same time, the article reminds investors to consider factors such as security, transaction fees, currency selection when choosing an APP, and pay attention to the risks of virtual currency trading.
The latest entrance address of Binance Exchange in 2025
May 07, 2025 pm 07:00 PM
As the world's leading cryptocurrency exchange, Binance is always committed to providing users with a safe and convenient trading experience. Over time, Binance has continuously optimized its platform features and user interface to meet the changing needs of users. In 2025, Binance launched a new login portal aimed at further improving the user experience.
Laravel integration with social media login (OAuth)
May 22, 2025 pm 09:27 PM
Integrating social media login in the Laravel framework can be achieved by using the LaravelSocialite package. 1. Install the Socialite package: use composerrequirelaravel/socialite. 2. Configure the service provider and alias: add relevant configuration in config/app.php. 3. Set API credentials: Configure social media API credentials in .env and config/services.php. 4. Write controller method: Add redirection and callback methods to handle social media login process. 5. Handle FAQs: Ensure user uniqueness, data synchronization, security and error handling. 6. Optimization practice:
Binance download link Binance download path
Apr 24, 2025 pm 02:12 PM
To safely download the Binance APP, you need to go through the official channels: 1. Visit the Binance official website, 2. Find and click the APP download portal, 3. Choose to scan the QR code, app store, or directly download the APK file to download to ensure that the link and developer information are authentic, and enable two-factor verification to protect the security of the account.
2025 Binance Binance Exchange Latest Login Portal
May 07, 2025 pm 07:03 PM
As the world's leading cryptocurrency exchange, Binance is always committed to providing users with a safe and convenient trading experience. Over time, Binance has continuously optimized its platform features and user interface to meet the changing needs of users. In 2025, Binance launched a new login portal aimed at further improving the user experience.
Watch the official page of NIS comics online for free comics. The free entry website of NIS comics login page
Jun 12, 2025 pm 08:18 PM
Nice Comics, an immersive reading experience platform dedicated to creating for comic lovers, brings together a large number of high-quality comic resources at home and abroad. It is not only a comic reading platform, but also a community that connects comic artists and readers and shares comic culture. Through simple and intuitive interface design and powerful search functions, NES Comics allows you to easily find your favorite works and enjoy a smooth and comfortable reading experience. Say goodbye to the long waiting and tedious operations, enter the world of Nice comics immediately and start your comic journey!
