vue3怎麼使用Facebook嵌入式影片播放器API

正文

Facebook 內嵌影片播放器 API是 JavaScript 版 Facebook SDK 提供的用戶端功能。可以在自己網站上播放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="&#39;fb-&#39; + 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，以此辨識播放器。

屬性

設定	描述	預設值
data-href	影片的絕對網址。	n/a
data-allowfullscreen	允許影片在全螢幕模式下播放。可以是 false 或 true。	false
data-autoplay	#頁面載入時自動開始播放影片。影片將無聲（靜音）播放。使用者可以透過視訊播放器控制選項開啟聲音。此設定不適用於行動裝置。可以是 false 或 true。	false
data-lazy	#true 表示您可透過設定 loading="lazy" iframe 屬性來使用瀏覽器的延遲載入機制。其效果是，如果插件不在視區附近，則瀏覽器不會顯示插件，您可能始終無法看到該插件。可以是 true 或 false（預設）的其中一個。	false
data-width	#影片容器的寬度。最小值為 220px。	auto
data-show-text	如果與視頻關聯的Facebook 帖子中有任何文本，則將其設為true 以添加該文本。僅適用於桌面端網站。	false
data-show-captions	設定為 true 即可預設顯示字幕（如適用）。字幕僅適用於桌面裝置。	false

方法

##說明參數（類型）play()播放影片。 pause()暫停影片。 seek(seconds)找出指定位置。 seconds (number)mute()影片設為靜音。 unmute()#取消影片靜音。 isMuted()#影片設定為靜音時為 true，反之亦然為 false。 setVolume(volume)將音量設定為指定數字（float，範圍從 0 到 1）。 volume (float)getVolume()返回影片的目前音量（float，範圍從 0 到 1）。 getCurrentPosition()傳回目前的視訊時間位置，精確到秒。 getDuration()#返回影片時長，精確到秒。 subscribe(event, eventCallback)為指定事件新增偵聽函式。關於事件的詳細信息，請參閱事件部分。返回一個口令，其中包含 release 方法，並且呼叫此方法會再次從事件中移除偵聽程序。 event (string)、eventCallback (function)

#函數

#事件

事件描述startedPlaying影片開始播放時觸發。 paused影片暫停時觸發。 finishedPlaying影片播放完時觸發。 startedBuffering影片開始緩衝時觸發。 finishedBuffering影片從緩衝恢復時觸發。 error影片發生錯誤時觸發。

以上是vue3怎麼使用Facebook嵌入式影片播放器API的詳細內容。更多資訊請關注PHP中文網其他相關文章！