最近更新时间:2024.04.16 19:24:29
首次发布时间:2024.04.12 15:38:55
播放器实例化配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
id | string | 否 | - | 播放器容器 ID。播放器将被插入在该容器中。 说明
|
root | HTMLElement | 否 | - | 播放器容器 DOM 元素。VePlayer 将被插入该容器中。 说明
|
url | string | 否 | - | 视频播放地址。 |
vid | string | 否 | - | 视频点播服务中的视频 ID。推荐填写,以方便跟踪该视频的播放质量。您将音视频上传至视频点播服务后,可通过以下方式获取
|
getVideoByToken | IPlayAuthTokenConfig | 否 | - | Vid 播放配置项。应用服务端需通过 vid 生成临时 playAuthToken ,下发给客户端。 |
streamType | "mp4" | "hls" | "dash" | "rtm" | "flv" | 否 | - | 视频格式。取值如下:
说明 如果 |
width | string | number | 否 | 100% | 播放器宽度。可传入数字或者 CSS width 属性值。如为数字,单位为 px。 |
height | string | number | 否 | 100% | 播放器高度。可传入数字或者 CSS width 属性值。如为数字,单位为 px。 |
volume | number | 否 | 0.6 | 默认起播音量。取值范围为 [0,1]。 |
autoplay | boolean | 否 |
| 是否开启自动播放。取值如下:
说明 受限于浏览器策略,自动播放不一定能成功,取决于浏览器环境、用户行为、浏览器配置等。详情请参考自动播放。 |
poster | string | IPoster | 否 | - | 视频封面图片的 URL。 |
autoplayMuted | boolean | 否 |
| 是否开启静音自动播放。取值如下:
|
enableDegradeMuteAutoplay | boolean | 否 |
| 是否开启降级静音自动播放。开启后,有声音自动播放失败时,会降级成静音自动播放。取值如下:
|
enableUserActionAutoplay | boolean | 否 |
| 是否开启任意用户行为触发自动播放。开启后,第一次用户的任意点击可以触发播放器的自动播放。取值如下:
|
loop | boolean | 否 |
| 是否开启循环播放。取值如下:
|
defaultPlaybackRate | number | 否 | 1 | 默认起播倍速。可设为 0.5 、0.75 、1 、1.5 、2 。 |
lang | "zh" | "zh-cn" | "en" | "jp" | "zh-hk" | 否 |
| 界面语言。取值如下:
|
languages | { [key: string]: Record<string, any>; } | 否 | - | 多语言词典。可设置每个语种的词典,例如: 说明 了解更多,请参见默认词典。 |
pip | boolean | IPIPConfig | 否 |
| 画中画配置。 说明 画中画功能由浏览器提供。如果浏览器不支持,即使传入此配置也不会显示画中画按钮。 |
fullscreen | IFullscreenConfig | 否 | {position: 'controlsRight', index: 0, rotateFullscreen: false, useCssFullscreen: false, target: null, switchCallback: null, disable: false, needBackIcon: false } | 全屏配置。 |
alwaysShowDefinition | boolean | 否 | false | 是否总是显示清晰度切换控件,即只有单个清晰度时也显示清晰度切换控件。 |
definitionText | string | 否 |
|
说明 仅 |
definitionTextKey | string | 否 | - |
说明 仅 |
codec | "h265" | "h264" | "unknown" | 否 | - | 视频编码格式。 说明
|
pluginPublicPath | string | 否 | https://lf-unpkg.volccdn.com/obj/vcloudfe/sdk/@volcengine/veplayer/${version}/plugin | 插件加载的路径。您可从 SDK 离线包中获取插件,然后将插件文件放置于应用服务器上,再在初始化播放器时指定插件地址。 |
startTime | number | 否 | 0 | 起播时间,单位为秒。 |
playsinline | boolean | 否 |
| 是否启用内联播放模式。
说明 此参数仅在在移动端生效。此参数取值为
|
videoAttributes | Partial<HTMLVideoElement> | 否 | 无 | video 标签扩展属性。播放器初始化时会设置在 videoElement 或 audioElement 对象上。请参考 HTMLMediaElement 查看支持的属性。 |
fluid | boolean | 否 |
| 是否启用流式布局。启用流式布局后,播放器会根据屏幕宽度进行自适应调整,以确保在不同屏幕尺寸上都能呈现良好的显示效果。取值如下:
说明 启用流式布局时,播放器的宽高比与
|
fitVideoSize | "fixWidth" | "fixHeight" | "fixed" | 否 |
| 尺寸适配方式。在视频资源初始化之后,根据获取到的
|
videoFillMode | "cover" | "auto" | "fillHeight" | "fillWidth" | "fill" | 否 |
| 视频画面填充模式。取值如下:
|
marginControls | boolean | 否 |
| 是否开启画面和控制栏分离模式。开启时,控制栏将会常驻,与视频画面不重叠。
|
'x5-video-player-type' | string | 否 | 无 | 是否启用 X5 内核浏览器的同层播放。 |
'x5-video-player-fullscreen' | boolean | 否 | 无 | 是否启用 X5 内核浏览器的全屏播放模式。
|
'x5-video-orientation' | "landscape" | "portrait" | "landscape|portrait" | 否 |
| X5 内核浏览器的横竖屏控制。取值如下:
|
isMusic | boolean | 否 |
| 是否开启音乐播放模式。开启后,您可还通过
|
closeVideoStopPropagation | boolean | 否 |
| 是否关闭
|
enableMenu | boolean | 否 |
| 是否开启右键菜单。取值如下:
|
enableHlsMSE | boolean | 否 | - | 是否开启 HLS 视频的 MSE 模式。仅移动端生效。默认情况下,在移动端使用原生`video 播放 HLS 视频。开启后,将采用 MSE 方式播放 HLS 视频,实现更好的兼容性、能控制缓存、节省流量。 | |
useHlsPluginForSafari | boolean | 否 |
| 在 PC Safari 上是否 HLS 插件播放视频。取值如下:
|
enableMp4MSE | boolean | 否 | false | 是否开启 MP4 视频的 MSE 模式。开启后,将采用 MSE 方式播放 MP4,实现精确的 Seek 加载、视频的无缝切换、流量节省等功能。 |
playList | Stream[] | 否 | - | 播放地址列表。 |
plugins | any[] | 否 | - | 注册插件。可传入插件实例,例如 [VePlayer.playListPlugin] 表示注册播放列表插件。 |
ignores | string[] | 否 | [] | 用于禁用插件。VePlayer 内置了一些常用的功能插件。如需禁用某一内置插件,可传入插件名称(不区分大小写)。 |
umdUrlMap | Record<string, string> | 否 | - | UMD 依赖备用地址。用于依赖的 CDN 发生网络错误时的降级备用地址。支持的依赖如下:
|
unionId | string | 否 | - | 唯一 ID,用于私有加密方案。 |
useSoftDecoding | boolean | 否 |
| 是否启用软解。取值如下:
说明
|
enableH265Degrade | boolean | 否 |
| 是否开启 H.265 自动降级模式。开启 H.265 兼容模式后,VePlayer 会在不支持 H.265 硬解的浏览器环境下,自动降级为兼容模式。取值如下:
|
sdkErrorPlugin | ISdkErrorConfig | 否 | - | 播放器报错信息。支持配置播放异常时显示的异常文案、图片以及是否提供刷新按钮等。 |
DanmuPlugin | boolean | IDanmuConfig | 否 | - | 弹幕及面板配置。支持配置弹幕文字大小、透明度、展示区域等参数。 |
EncryptHlsPlugin | boolean | Partial<IEncryptHlsPluginConfig> | 否 | - | HLS 加密播放配置。 |
vodLogOpts | Partial<IVodLogOptsConfig> | 否 | - | 质量日志上报配置 |
Subtitle | ISubtitleConfig | 否 | - | 外挂字幕配置。 |
MemoryPlay | boolean | IMemoryPlayConfig | 否 | - | 记忆播放配置。 |
music | IMusicConfig | 否 | - | 音乐播放器配置。 |
AutoplayPlugin | IAutoplayPluginConfig | 否 | - | 自动播放配置。 |
playListPlugin | IPlayListConfig | 否 | - | 播放列表配置。 |
onTokenExpired | () => Promise | 否 | - | playAuthToken 过期时的回调函数,可用来更新 playAuthToken 。 |
Vid 播放配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
playAuthToken | string | 是 | - | 应用服务端生成的临时播放凭证。 |
defaultDefinition | string | 否 | - | 默认清晰度。对应 GetPlayInfo 接口返回的 Definition 。为空时默认为接口返回的最高清晰度。 |
playDomain | string | 否 | https://vod.volcengineapi.com | 获取播放地址的请求域名。 |
needPoster | boolean | 否 |
| 是否使用您在视频点播控制台上设置的封面图。 取值如下:
说明 请确保您已在视频点播控制台中生成和设置封面图,详见封面图和封面候选。 |
needThumbs | boolean | 否 |
| 是否使用您在视频点播控制台上生成的雪碧图。取值如下:
说明 请确保您已通过视频点播媒体处理服务生成雪碧图,详见雪碧图。 |
needBarrageMask | boolean | 否 |
| 是否使用您在视频点播控制台上生成的蒙版弹幕。取值如下:
说明 请确保您已通过视频点播媒体处理服务生成蒙版弹幕。 |
needDefinitionList | boolean | 否 | true | 是否需要获取展示多个清晰度。 |
keyToken | string | 否 | - | 用于 HLS 标准加密播放的 keyToken。 |
reqParams | Record<string, string | number | boolean> | 否 | - | 透传参数。可传入 aid 等参数,例如 {aid: 1234} 。当透传参数与 playAuthToken 中包含的参数重复时,playAuthToken 下发的参数优先级最高。具体可传参数见签发 PlayAuthToken |
definitionMap | Record<string, string | definitionItem> | 否 | - | 定义清晰度的映射。 |
retryCount | number | 否 | 1 | 点播服务发生 502 错误时的重试次数。 |
getDrmAuthToken | (playAuthIds: string, vid: string, unionInfo: string) => Promise | 否 | - | 获取
|
清晰度定义。
属性 | 描述 |
---|---|
definition | 清晰度。 |
definitionTextKey | 清晰度多语言 Key |
封面配置
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
poster | string | 是 | - | 封面图 URL 地址。 |
isEndedShow | boolean | 否 | true | 是否在播放结束之后显示封面图。 |
hideCanplay | boolean | 否 |
| 是否播放后隐藏封面图。
|
notHidden | boolean | 否 | false | 是否一直显示封面图。 |
fillMode | "fixWidth" | "fixHeight" | "cover" | "contain" | 否 | - | 封面图填充方式。取值如下:
|
画中画配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
showIcon | boolean | 否 |
| 是否显示画中画按钮。取值如下:
|
preferDocument | boolean | 否 |
| 是否优先使用网页画中画。 说明 仅浏览器支持 |
width | number | 否 | - | 网页画中画模式下窗口的宽度。 |
height | number | 否 | - | 网页画中画模式下窗口的高度。 |
docPiPNode | HTMLElement | 否 | - | 网页画中画模式下窗口的根节点。 |
docPiPStyle | (...arg: any) => string | 否 | - | 文档画中画窗口的 CSS Style。 |
全屏配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
useCssFullscreen | boolean | 否 | - | 是否使用页面全屏代替系统全屏。取值如下:
|
rotateFullscreen | boolean | 否 |
| 是否使用旋转横屏。取值如下:
说明
|
target | HTMLElement | 否 |
| 自定义全屏功能的 dom 。默认是播放器根节点。该参数必须是 player.root 的父辈节点,适用于解决全屏时和 player.root 同级的 dom 需要显示的场景。 |
disable | boolean | 否 |
| 是否禁用全屏按钮。
|
needBackIcon | boolean | 否 |
| 全屏的时候是否显示右上角返回按钮。取值如下:
说明 此参数一般用于移动端。 |
switchCallback | (...arg: any) => any | 否 |
| 全屏切换自定义实现。该函数配置相当于完全替代插件内部的切换逻辑。 |
视频编码格式。
属性 | 描述 |
---|---|
H265 | H.265 |
H264 | H.264 |
UNKNOWN | 未知编码格式 |
播放器关键点样式。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
progressColor | string | 否 | 无 | 进度条底色。 |
playedColor | string | 否 | 无 | 播放完成部分进度条底色。 |
cachedColor | string | 否 | 无 | 缓存部分进度条底色。 |
sliderBtnStyle | CSSStyleDeclaration | 否 | 无 | 进度条滑块样式。 |
volumeColor | string | 否 | 无 | 音量颜色。 |
播放地址列表,可配置多线路和多清晰度。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
streamType | string | 否 | - | URL 类型,取值为:
|
url | string | 是 | - | 播放地址 |
definition | string | 否 | - | 清晰度 key |
definitionTextKey | string | 否 | - | 多语言词典中对应的 key。比如设置 definitionTextKey: HD_TEXT_KEY 以及 languages: {zh: {HD_TEXT_KEY: '高清'}} ,则清晰度切换选项显示 “高清”。不设置则显示 definition 的值。 |
codec | CodecType | 否 | unknown | 编码格式 |
lineId | string | number | 否 | - | 线路唯一 ID |
lineTextKey | string | 否 | - | 多语言词典中对应的 key。比如 lineTextKey: LINE_ONE 。 |
播放器发生错误时的 UI 配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
errorImg | boolean | 否 | true | 报错时是否展示提示图片。 |
errorTips | boolean | 否 | true | 报错时是否展示报错文案。 |
isNeedRefreshButton | boolean | 否 | ture | 报错时是否展示刷新按钮。 |
retryLoopNum | number | 否 | 1 | 报错后重试次数。 |
errorTipsText | TipsTextConfig | 否 | 播放发生错误,点击刷新试试吧 | 不同语言对应的报错提示文案。 |
报错文案配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
zh | string | HTMLElement | 否 | 播放发生错误,点击刷新试试吧 | 中文错误文案。 |
en | string | HTMLElement | 否 | An error occurred while playing, click refresh to try | 英文错误文案。 |
jp | string | HTMLElement | 否 | 再生中にエラーが発生しました。[更新]をクリックして試してください | 日文错误文案。 |
'zh-hk' | string | HTMLElement | 否 | 播放發生錯誤,點擊刷新試試吧 | 香港繁体中文错误文案。 |
弹幕配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
opacity | number | 否 |
| 弹幕透明度。取值如下:
|
area | number | 否 |
| 弹幕区域大小。取值如下:
|
speed | number | 否 |
| 弹幕滚动速度。取值如下:
|
fontSize | number | 否 |
| 弹幕字体大小。取值如下:
|
active | boolean | 否 |
| 是否打开面板。取值如下:
|
danmuItems | DanmuItem[] | 否 | - | 弹幕列表。 |
弹幕项
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
id | string | 是 | - | 弹幕唯一 ID。 |
txt | string | 是 | - | 弹幕文案。 |
start | number | 否 | 0 | 弹幕出现时间,单位为毫秒。 |
duration | number | 否 | 5000 | 弹幕持续显示时长,单位为毫秒。 |
style | CSSStyleDeclaration | 否 | - | 弹幕样式。示例如下:style : { color: '#ff9500', fontSize: '20px', padding: '2px 11px'} |
DASH 播放配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
vid | string | 否 | - | 视频 ID。 |
definitionText | Record<string, string> | 是 | - | 清晰度映射文案。 |
defaultDefinition | string | 否 | 列表第一个 | 默认清晰度。 |
preloadTime | number | 否 | 50 | 预加载时间,单位为毫秒。 |
HLS 加密播放配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
playDomain | string | 否 | https://vod.volcengineapi.com | 获取播放地址的请求域名。 |
playAuthToken | string | 否 | - | 播放临时安全凭证 playAuthToken 。由服务端生成下发,详见播放临时安全凭证 PlayAuthToken 。 |
keyToken | string | 是 | - | 密钥获取 token。由服务端生成下发,详见签发 HLS 标准加密 AuthToken。 |
质量日志上报配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
line_app_id | number | 是 | - | 视频点播应用 ID。您可在视频点播控制台应用管理页面获取应用 ID(App ID)。 |
line_user_id | string | number | 是 | - | 用于识别单一用户的 ID,可在 QoE 指标中用于用户维度的筛选,也可以用于单点追查查找单用户的播放日志。用户 ID 对应于单点追查功能的查询条件中的设备 ID 维度。如不设置用户 ID,VePlayer 将根据用户浏览器随机生成一个值,该值会在浏览器端缓存。 |
tag | string | 否 | 普通视频 | 业务标签。对应于质量平台上的业务类型维度,其作用是区分业务中的不同场景,以便进行多维度分析。举例来说,假设您的应用中包含短视频和长视频两个场景,则可分别将 tag 设为 short 和 long 。这样一来,您就能够在质量平台上通过业务标签维度查询或过滤不同场景的数据。 |
subtag | string | 否 | - | 自定义子标签。对应于质量平台上的自定义标签维度,与 tag 配合使用,可用于区分同一业务类型下更为细分的音视频类型,比如加密视频、非加密视频、音频等。 |
codec_type | "h265" | "h264" | 否 |
| 视频编码类型,取值如下
|
外挂字幕配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
position | string | 否 | controlsRight | 图标位置。 |
index | number | 否 | 6 | 图标排列权重。 |
list | ISubTitleItem[] | 否 | - | 字幕列表。 |
isDefaultOpen | boolean | 否 | true | 是否默认打开字幕。 |
isShowIcon | boolean | 否 | true | 是否显示图标。 |
mode | "external" | "native" | 否 |
| 字幕渲染模式,取值如下:
|
style | ISubtitleStyle | 否 | - | 字幕样式。 |
字幕项。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
language | string | number | 否 | - | 字幕语言。 |
id | string | number | 否 | - | 字幕 ID。 |
isDefault | boolean | 否 | false | 是否为默认选择的字幕。 |
text | string | 否 | - | 字幕名称。 |
url | string | 否 | - | 外挂字幕 URL 地址。 |
list | IListItem[] | 否 | 无 | 字幕内容列表。非 url 形式时使用。 |
字幕内容项。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
start | number | 是 | - | 开始时间,单位为秒。 |
end | number | 是 | - | 结束时间,单位为秒。 |
list | ITextItem[] | 是 | - | 字幕数据列表。 |
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
start | number | 是 | - | 开始时间,单位为秒。 |
end | number | 是 | - | 结束时间,单位为秒。 |
text | string[] | 是 | - | 字幕文案数组。 |
index | number | 否 | - | 字幕顺序。 |
字幕样式配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
follow | boolean | null | 是 | true | 是否跟随控制栏调整位置。 |
mode | "stroke" | "bg" | 否 |
| 字体显示模式,默认如下;
|
followBottom | number | 否 | 50 | 是否跟随底部控制栏的高度。 |
fitVideo | boolean | 否 | true | 是否跟随视频自动调整字号。 |
offsetBottom | number | 否 | 4 | 字幕距离画面底部百分比。 |
baseSizeX | number | 否 | 49 | 横屏视频适配基准字号。 |
baseSizeY | number | 否 | 28 | 竖屏视频适配基准字号。 |
minSize | number | 否 | 16 | PC 端最小字号. |
minMobileSize | number | 否 | 13 | 移动端最小字号。 |
line | "double" | "single" | "three" | 否 |
| 最大显示行数。取值如下:
|
fontColor | string | 否 | #fff | 字体颜色。可设为 16 位颜色值或 RGB 值。 |
记忆播放配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
memoryId | string | number | 是 | options.vid || options.url | 存储标识id |
saveTime | (id: number | string, time: number) => unknown | 否 | - | 设置时间函数 |
getTime | (id: number | string) => number | Promise | 否 | - | 获取最后一次播放时间函数 |
音乐播放模式配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
offline | boolean | 否 | false | 是否启用离线下载播放。 |
abCycle | IABCycle | null | 否 | null | AB 循环播放配置。 |
timeScale | number | 否 | 15 | 快进快退时间跨度,单位为秒。 |
mode | PlayModeType | 否 | order | 循环模式。 |
list | IMusicListItem[] | 否 | [] | 播放列表。 |
AB 循环播放配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
start | number | 是 | 0 | AB 循环段开始时间,单位为秒。 |
end | number | 是 | 音乐结束时间点 | AB 循环段开始时间,单位为秒。 |
loop | boolean | 否 | false | AB 段是否循环播放。 |
自动播放配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
enableDegradeMuteAutoplay | boolean | 否 | false | 是否开启降级静音自动播放。开启后,如果当前浏览器环境不支持有声音自动播放,则降级为静音自动播放。 |
userActionDom | Node | 否 | window.document.body | 用户触发自动播放的目标 dom。 |
enableUserActionAutoplay | boolean | 否 |
| 是否开启任意用户行为触发自动播放。开启后,第一次用户的任意点击可以触发播放器的自动播放。取值如下:
|
播放列表插件配置。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
position | string | 否 |
| 按钮位置。取值如下:
|
index | number | 否 | 20 | 按钮在所在区域的次序。默认值为 2 ,表示在播放按钮后。 |
list | IPlayListItem[] | 是 | [] | 播放列表数据。 |
mode | 否 |
| 循环模式,取值如下:
| |
defaultIndex | number | 否 | order | 默认起始的播放次序。 |
isItemClickHide | boolean | 否 | true | 列表点击之后是否隐藏。 |
toggleMode | TOGGLE_MODES | 否 | click | 列表行为触发模式。 |
isShowIcon | boolean | 否 | true | 是否显示播放列表按钮。 |
播放列表项配置,支持 DirectUrl 和 Vid + playAuthToken 两种播放模式。
配置项 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
url | string | 否 | - | 视频地址。 说明
|
playAuthToken | string | 否 | - | 播放临时安全凭证,由业务的 AppServer 签发。 说明
|
vid | string | 是 | - | 视频的唯一 ID。不传则取视频所在列表数组的序号。 |
poster | string | 否 | - | 视频封面图地址。 |
title | string | 否 | - | 视频标题。 |
duration | number | 否 | - | 视频时长,单位为秒。 |