开始使用先引入 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/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的详细内容。