vue3如何使用Facebook嵌入式视频播放器API

本篇内容主要讲解“vue3如何使用Facebook嵌入式视频播放器API”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue3如何使用Facebook嵌入式视频播放器API”吧!

正文

Facebook 嵌入式视频播放器 API是 JavaScript 版 Facebook SDK 提供的客户端功能。可以在自己网站上播放Facebook视频。

开始使用

先引入 Facebook SDK

封装成组件FacebookPlayer

使用方式

注意事项

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)

事件

活动：慈云数据爆款香港服务器，CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快，免备案，每月仅需19元！！ 点击查看

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

到此，相信大家对“vue3如何使用Facebook嵌入式视频播放器API”有了更深的了解，不妨来实际操作一番吧！这里是服务器测评网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！