vue3如何使用Facebook嵌入式视频播放器API

本篇内容主要讲解“vue3如何使用Facebook嵌入式视频播放器API”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue3如何使用Facebook嵌入式视频播放器API”吧!

正文

Facebook 嵌入式视频播放器 API是 JavaScript 版 Facebook SDK 提供的客户端功能。可以在自己网站上播放Facebook视频。

开始使用

先引入 Facebook SDK

<script async defer class="lazy" data-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: "" },  class="lazy" data-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 JavaScriptconst 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 Instancelet 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.class="lazy" data-src" rel="external nofollow"     :data-autoplay="props.autoplay"    :data-allowfullscreen="false"  ></div></template>

使用方式

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

注意事项

class="fb-video" 该类名不能去掉。

如果在一个页面上使用了多个播放器，一定要传唯一id，以此识别播放器。

属性

方法

事件

到此，相信大家对“vue3如何使用Facebook嵌入式视频播放器API”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！