Cara menggunakan API pemain video terbenam Facebook dalam vue3

Teks

API pemain video terbenam Facebook ialah fungsi klien yang disediakan oleh versi JavaScript SDK Facebook. Anda boleh memainkan video Facebook di tapak web anda.

Mulakan

Mula-mula perkenalkan Facebook SDK

<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

dan masukkan ke dalam komponen 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="&#39;fb-&#39; + id"
    class="fb-video"
    :data-href="props.src" rel="external nofollow" 
    :data-autoplay="props.autoplay"
    :data-allowfullscreen="false"
  ></div>
</template>

Cara menggunakan

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

Nota

class="fb-video" Nama kelas ini tidak boleh dialih keluar.

Jika berbilang pemain digunakan pada halaman, ID unik mesti dihantar untuk mengenal pasti pemain.

Hartanah

设置	描述	默认值
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

Kaedah

函数	说明	参数（类型）
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)

Acara

事件	描述
startedPlaying	视频开始播放时触发。
paused	视频暂停时触发。
finishedPlaying	视频播放完时触发。
startedBuffering	视频开始缓冲时触发。
finishedBuffering	视频从缓冲恢复时触发。
error	视频发生错误时触发。

Atas ialah kandungan terperinci Cara menggunakan API pemain video terbenam Facebook dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!