vue3怎么使用Facebook嵌入式视频播放器API-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

正文

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 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.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/adata-allowfullscreen允许视频在全屏模式下播放。可以是 false 或 true。falsedata-autoplay页面加载时自动开始播放视频。视频将无声（静音）播放。用户可以通过视频播放器控制选项打开声音。此设置不适用于移动设备。可以是 false 或 true。falsedata-lazytrue 表示您可通过设置 loading="lazy" iframe 属性来使用浏览器的延迟加载机制。其效果是，如果插件不在视区附近，则浏览器不会显示插件，且您可能始终无法看到该插件。可以是 true 或 false（默认）的其中一个。falsedata-width视频容器的宽度。最小值为 220px。autodata-show-text如果与视频关联的 Facebook 帖子中有任何文本，则设置为 true 以添加该文本。仅适用于桌面端网站。falsedata-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的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~