vue3使用Facebook嵌入式視頻播放器API方法詳解
正文
Facebook 嵌入式視頻播放器 API是 JavaScript 版 Facebook SDK 提供的客戶端功能??梢栽谧约壕W(wǎng)站上播放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="'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,以此識別播放器。
屬性
設(shè)置 | 描述 | 默認(rèn)值 |
---|---|---|
data-href | 視頻的絕對網(wǎng)址。 | n/a |
data-allowfullscreen | 允許視頻在全屏模式下播放。可以是 false 或 true。 | false |
data-autoplay | 頁面加載時自動開始播放視頻。視頻將無聲(靜音)播放。用戶可以通過視頻播放器控制選項打開聲音。此設(shè)置不適用于移動設(shè)備。可以是 false 或 true。 | false |
data-lazy | true 表示您可通過設(shè)置 loading="lazy" iframe 屬性來使用瀏覽器的延遲加載機制。其效果是,如果插件不在視區(qū)附近,則瀏覽器不會顯示插件,且您可能始終無法看到該插件??梢允?true 或 false(默認(rèn))的其中一個。 | false |
data-width | 視頻容器的寬度。最小值為 220px。 | auto |
data-show-text | 如果與視頻關(guān)聯(lián)的 Facebook 帖子中有任何文本,則設(shè)置為 true 以添加該文本。僅適用于桌面端網(wǎng)站。 | false |
data-show-captions | 設(shè)置為 true 即可默認(rèn)顯示字幕(如適用)。字幕僅適用于桌面設(shè)備。 | false |
方法
函數(shù) | 說明 | 參數(shù)(類型) |
---|---|---|
play() | 播放視頻。 | |
pause() | 暫停視頻。 | |
seek(seconds) | 尋找指定位置。 | seconds (number) |
mute() | 視頻設(shè)為靜音。 | |
unmute() | 取消視頻靜音。 | |
isMuted() | 視頻設(shè)為靜音時為 true,反之則為 false。 | |
setVolume(volume) | 將音量設(shè)置為指定數(shù)字(float,范圍從 0 到 1)。 | volume (float) |
getVolume() | 返回視頻的當(dāng)前音量(float,范圍從 0 到 1)。 | |
getCurrentPosition() | 返回當(dāng)前的視頻時間位置,精確到秒。 | |
getDuration() | 返回視頻時長,精確到秒。 | |
subscribe(event, eventCallback) | 為指定事件添加偵聽函數(shù)。關(guān)于事件的詳細(xì)信息,請參閱事件部分。返回一個口令,其中包含 release 方法,調(diào)用此方法會再次從事件中移除偵聽程序。 | event (string)、eventCallback (function) |
事件
事件 | 描述 |
---|---|
startedPlaying | 視頻開始播放時觸發(fā)。 |
paused | 視頻暫停時觸發(fā)。 |
finishedPlaying | 視頻播放完時觸發(fā)。 |
startedBuffering | 視頻開始緩沖時觸發(fā)。 |
finishedBuffering | 視頻從緩沖恢復(fù)時觸發(fā)。 |
error | 視頻發(fā)生錯誤時觸發(fā)。 |
以上就是vue3使用Facebook嵌入式視頻播放器API方法詳解的詳細(xì)內(nèi)容,更多關(guān)于vue3 Facebook播放器API的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue實現(xiàn)Tab標(biāo)簽路由效果并用Animate.css做轉(zhuǎn)場動畫效果的代碼
這篇文章主要介紹了Vue實現(xiàn)Tab標(biāo)簽路由效果,并用Animate.css做轉(zhuǎn)場動畫效果,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07vue中將el-switch值true、false改為number類型的1和0
這篇文章主要介紹了vue中將el-switch值true、false改為number類型的1和0問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue3如何使用vant-picker封裝省市二級聯(lián)動
這篇文章主要介紹了vue3如何使用vant-picker封裝省市二級聯(lián)動,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式
這篇文章主要介紹了vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07