vue3에서 Facebook 임베디드 비디오 플레이어 API를 사용하는 방법

Text

Facebook 임베디드 비디오 플레이어 API는 Facebook SDK의 JavaScript 버전에서 제공하는 클라이언트 기능입니다. 웹사이트에서 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="&#39;fb-&#39; + 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>

Notes

class="fb-video" 이 클래스 이름은 제거할 수 없습니다.

한 페이지에 여러 플레이어가 사용되는 경우 플레이어를 식별하기 위해 고유 ID를 전달해야 합니다.

속성

설정	설명	기본값
data-href	동영상의 절대 URL입니다.	n/a
data-allowfullscreen	동영상을 전체 화면 모드로 재생할 수 있습니다. 거짓일 수도 있고 참일 수도 있습니다.	false
data-autoplay	페이지가 로드되면 자동으로 동영상 재생을 시작합니다. 동영상은 소리 없이(음소거) 재생됩니다. 사용자는 비디오 플레이어 컨트롤을 통해 사운드를 켤 수 있습니다. 이 설정은 모바일 장치에서는 작동하지 않습니다. 거짓일 수도 있고 참일 수도 있습니다.	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

Method

Function	Description	Parameters (type)
play()	동영상을 재생합니다.
pause()	영상을 일시중지합니다.
seek(초)	지정된 위치를 검색합니다.	초(숫자)
mute()	동영상을 음소거합니다.
음소거 해제()	동영상 음소거를 해제하세요.
isMated()	는 동영상이 음소거로 설정된 경우 true이고, 그렇지 않은 경우 false입니다.
setVolume(volume)	볼륨을 지정된 숫자(부동 소수점, 0~1 범위)로 설정합니다.	volume (float)
getVolume()	동영상의 현재 볼륨을 반환합니다(float, 범위: 0~1).
getCurrentPosition()	현재 비디오 시간 위치를 초 단위까지 정확하게 반환합니다.
getDuration()	초 단위로 정확한 비디오 재생 시간을 반환합니다.
subscribe(event, eventCallback)	지정된 이벤트에 대한 청취 기능을 추가합니다. 이벤트에 대한 자세한 내용은 이벤트 섹션을 참조하세요. 해제 메소드가 포함된 비밀번호를 반환합니다. 이 메소드를 호출하면 이벤트에서 리스너가 다시 제거됩니다.	event(문자열), eventCallback(함수)

Event

Event	Description
startedPlaying	동영상 재생이 시작되면 트리거됩니다.
paused	동영상이 일시중지되면 트리거됩니다.
finishedPlaying	동영상 재생이 완료되면 트리거됩니다.
startedBuffering	동영상 버퍼링이 시작되면 시작됩니다.
finishedBuffering	동영상 버퍼링이 재개되면 트리거됩니다.
error	동영상에 오류가 발생하면 트리거됩니다.

위 내용은 vue3에서 Facebook 임베디드 비디오 플레이어 API를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!