vue3 で Facebook 埋め込みビデオ プレーヤー API を使用する方法

Text

Facebook 埋め込みビデオ プレーヤー API は、Facebook SDK の JavaScript バージョンによって提供されるクライアント機能です。 Facebook ビデオを Web サイト上で再生できます。

始めましょう

まず 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>

注意事項

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

メソッド

##関数説明play()pause()#seek(秒)指定された場所を検索します。 秒 (数字)mute()ビデオをミュートに設定します。 unmute()ビデオのミュートを解除します。 ビデオがミュートに設定されている場合は true、それ以外の場合は false。 ボリュームを指定された数値 (0 から 1 の範囲の浮動小数点数) に設定します。 ビデオの現在の音量を返します (float、範囲は 0 ～ 1)。 現在のビデオ時間位置を秒単位で返します。 動画の継続時間を秒単位で返します。 指定されたイベントのリスニング関数を追加します。イベントの詳細については、「イベント」セクションを参照してください。 release メソッドを含むパスワードを返します。このメソッドを呼び出すと、イベントからリスナーが再度削除されます。 event (文字列)、eventCallback (関数)##Event##Event

	パラメータ (タイプ)
ビデオを再生します。
ビデオを一時停止します。
		isMuted()
		setVolume(volume)
volume (float)		getVolume()
		getCurrentPosition()
		getDuration()
		#subscribe(event,eventCallback)

Description

startedPlayingビデオの再生が開始されると発生します。 pausedビデオが一時停止されるときに発生します。 finishedPlayingビデオの再生が終了するとトリガーされます。 startedBufferingビデオのバッファリングが開始されるときに発生します。 finishedBufferingビデオがバッファリングから再開するときに発生します。 errorビデオでエラーが発生するとトリガーされます。

以上がvue3 で Facebook 埋め込みビデオ プレーヤー API を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。