vue3使用Facebook嵌入式视频播放器API方法详解

 更新时间:2023年03月07日 15:53:39   作者:简单不容易  
这篇文章主要为大家介绍了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,以此识别播放器。

属性

设置描述默认值
data-href视频的绝对网址。n/a
data-allowfullscreen允许视频在全屏模式下播放。可以是 false 或 true。false
data-autoplay页面加载时自动开始播放视频。视频将无声(静音)播放。用户可以通过视频播放器控制选项打开声音。此设置不适用于移动设备。可以是 false 或 true。false
data-lazytrue 表示您可通过设置 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方法详解的详细内容,更多关于vue3 Facebook播放器API的资料请关注脚本之家其它相关文章!

相关文章

  • Vue privide 和inject 依赖注入的使用详解

    Vue privide 和inject 依赖注入的使用详解

    这篇文章主要介绍了Vue privide 和inject 依赖注入的用法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10
  • VUE v-for中的:key详解

    VUE v-for中的:key详解

    这篇文章主要为大家介绍了v-for中的:key,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 如何在在Vue3中使用markdown 编辑器组件

    如何在在Vue3中使用markdown 编辑器组件

    vue3发布正式版不久,生态还没完全发展起来,目前支持vue3的开源markdown编辑器组件基本上也寥寥无几,向大家推荐一个很好用的v-md-editor 组件,组件功能很强大,文档也比较详细。该文章只介绍组件的常用功能,更多高级的功能可以参考官方文档。
    2021-05-05
  • Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码

    Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码

    这篇文章主要介绍了Vue实现Tab标签路由效果,并用Animate.css做转场动画效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • vue中将el-switch值true、false改为number类型的1和0

    vue中将el-switch值true、false改为number类型的1和0

    这篇文章主要介绍了vue中将el-switch值true、false改为number类型的1和0问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue3如何使用vant-picker封装省市二级联动

    vue3如何使用vant-picker封装省市二级联动

    这篇文章主要介绍了vue3如何使用vant-picker封装省市二级联动,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue之字符串、数组之间的相互转换方式

    vue之字符串、数组之间的相互转换方式

    这篇文章主要介绍了vue之字符串、数组之间的相互转换方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue实现递归组件的思路与示例代码

    Vue实现递归组件的思路与示例代码

    以简单的树形组件为案例,实现在组件中递归组件,下面这篇文章主要给大家介绍了关于Vue实现递归组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue3如何解决Element-plus不生效的问题

    Vue3如何解决Element-plus不生效的问题

    这篇文章主要介绍了Vue3如何解决Element-plus不生效的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue3动态添加路由

    vue3动态添加路由

    这篇文章主要介绍了vue3动态添加路由,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-06-06

最新评论