vue3如何使用Facebook嵌入式視頻播放器API

本篇內容主要講解“vue3如何使用Facebook嵌入式視頻播放器API”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“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="'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，以此識別播放器。

屬性

方法

事件

到此，相信大家對“vue3如何使用Facebook嵌入式視頻播放器API”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！