vue3使用Facebook嵌入式視頻播放器API方法詳解

更新時間：2023年03月07日 15:53:39 作者：簡單不容易

這篇文章主要為大家介紹了vue3使用Facebook嵌入式視頻播放器API方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

Facebook 嵌入式視頻播放器 API是 JavaScript 版 Facebook SDK 提供的客戶端功能。可以在自己網(wǎng)站上播放Facebook視頻。

開始使用

先引入 Facebook SDK

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

封裝成組件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>

使用方式

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

注意事項

class="fb-video" 該類名不能去掉。

如果在一個頁面上使用了多個播放器，一定要傳唯一id，以此識別播放器。

屬性

設(shè)置	描述	默認(rèn)值
data-href	視頻的絕對網(wǎng)址。	n/a
data-allowfullscreen	允許視頻在全屏模式下播放?？梢允?false 或 true。	false
data-autoplay	頁面加載時自動開始播放視頻。視頻將無聲（靜音）播放。用戶可以通過視頻播放器控制選項打開聲音。此設(shè)置不適用于移動設(shè)備?？梢允?false 或 true。	false
data-lazy	true 表示您可通過設(shè)置 loading="lazy" iframe 屬性來使用瀏覽器的延遲加載機(jī)制。其效果是，如果插件不在視區(qū)附近，則瀏覽器不會顯示插件，且您可能始終無法看到該插件?？梢允?true 或 false（默認(rèn)）的其中一個。	false
data-width	視頻容器的寬度。最小值為 220px。	auto
data-show-text	如果與視頻關(guān)聯(lián)的 Facebook 帖子中有任何文本，則設(shè)置為 true 以添加該文本。僅適用于桌面端網(wǎng)站。	false
data-show-captions	設(shè)置為 true 即可默認(rèn)顯示字幕（如適用）。字幕僅適用于桌面設(shè)備。	false

方法

函數(shù)	說明	參數(shù)（類型）
play()	播放視頻。
pause()	暫停視頻。
seek(seconds)	尋找指定位置。	seconds (number)
mute()	視頻設(shè)為靜音。
unmute()	取消視頻靜音。
isMuted()	視頻設(shè)為靜音時為 true，反之則為 false。
setVolume(volume)	將音量設(shè)置為指定數(shù)字（float，范圍從 0 到 1）。	volume (float)
getVolume()	返回視頻的當(dāng)前音量（float，范圍從 0 到 1）。
getCurrentPosition()	返回當(dāng)前的視頻時間位置，精確到秒。
getDuration()	返回視頻時長，精確到秒。
subscribe(event, eventCallback)	為指定事件添加偵聽函數(shù)。關(guān)于事件的詳細(xì)信息，請參閱事件部分。返回一個口令，其中包含 release 方法，調(diào)用此方法會再次從事件中移除偵聽程序。	event (string)、eventCallback (function)

事件

事件	描述
startedPlaying	視頻開始播放時觸發(fā)。
paused	視頻暫停時觸發(fā)。
finishedPlaying	視頻播放完時觸發(fā)。
startedBuffering	視頻開始緩沖時觸發(fā)。
finishedBuffering	視頻從緩沖恢復(fù)時觸發(fā)。
error	視頻發(fā)生錯誤時觸發(fā)。