video
导入
import { Video } from '@ray-js/ray';
import { createVideoContext } from '@ray-js/api';
视频
相关 API: createVideoContext
属性说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
src | string | 是 | 要播放视频的资源地址,支持网络路径; 注意分区部署情况下,视频是否支持访问 | |
duration | number | 否 | 指定视频时长,单位秒 s | |
controls | boolean | true | 否 | 是否显示默认播放控件(播放/暂停按钮、播放进度、时间) |
danmuList | Array<{text,color,time}> | 否 | 弹幕列表 | |
danmuBtn | boolean | false | 否 | 是否显示弹幕按钮,只在初始化时有效,不能动态变更 |
enableDanmu | boolean | false | 否 | 是否展示弹幕,只在初始化时有效,不能动态变更 |
autoplay | boolean | false | 否 | 是否自动播放 |
loop | boolean | false | 否 | 是否循环播放 |
muted | boolean | false | 否 | 是否静音播放 |
initialTime | number | 0 | 否 | 指定视频初始播放位置 |
showFullscreenBtn | boolean | true | 否 | 是否显示全屏按钮 |
showPlayBtn | boolean | true | 否 | 是否显示视频底部控制栏的播放按钮 |
showCenterPlayBtn | boolean | true | 否 | 是否显示视频中间的播放按钮 |
object-fit | string | contain | 否 | 当视频大小与 video 容器大小不一致时,视频的表现形式 |
poster | string | 否 | 视频封面的图片网络资源地址 | |
showMuteBtn | boolean | false | 否 | 是否显示静音按钮 |
autoPause | boolean | true | 否 | 非可视区域是否自动暂停 |
borderRadius | number | 0 | 否 | 指定视频 border-radius |
onPlay | eventhandle | 否 | 当开始/继续播放时触发 play 事件 | |
onPause | eventhandle | 否 | 当暂停播放时触发 pause 事件 | |
onEnded | eventhandle | 否 | 当播放到末尾时触发 ended 事件 | |
onTimeupdate | eventhandle | 否 | 播放进度变化时触发,event.detail = {currentTime, duration} 。 | |
onWaiting | eventhandle | 否 | 视频出现缓冲时触发 | |
onError | eventhandle | 否 | 视频播放出错时触发 | |
onProgress | eventhandle | 否 | 加载进度变化时触发,只支持一段加载。event.detail = {buffered},百分比 | |
onLoadedmetadata | eventhandle | 否 | 视频元数据加载完成时触发。event.detail = {width, height, duration} | |
onSeekcomplete | eventhandler | 否 | seek 完成时触发 (position iOS 单位 s, Android 单位 ms) |
object-fit 的合法值
值 | 说明 |
---|---|
contain | 包含 |
fill | 填充 |
cover | 覆盖 |
Bug & Tip
tip:video
默认宽度 300px、高度 225px,可通过 tyss 设置宽高。
tip:video
支持三种视频格式:MP4、WebM、Ogg。
- MP4 = MPEG 4 文件使用 H264 视频编解码器和 AAC 音频编解码器
- WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
- Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis 音频编解码器
常见问题(FAQ)
如何获取视频播放进度?
可通过onTimeupdate
获取视频播放时长。
👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。
NativeVideo
基础库 2.5.0 开始支持, 低版本需做兼容处理。
导入
import { NativeVideo } from '@ray-js/ray';
import { createNativeVideoContext } from '@ray-js/api';
视频。
相关 API: createNativeVideoContext。这是基于异层渲染的原生组件, 请注意 原生组件使用限制。
属性说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
src | string | 是 | 要播放视频的资源地址,支持网络路径; 注意分区部署情况下,视频是否支持访问 | |
duration | number | 否 | 指定视频时长,单位秒 s | |
controls | boolean | true | 否 | 是否显示默认播放控件(播放/暂停按钮、播放进度、时间) |
autoplay | boolean | false | 否 | 是否自动播放 |
loop | boolean | false | 否 | 是否循环播放 |
muted | boolean | false | 否 | 是否静音播放 |
initialTime | number | 0 | 否 | 指定视频初始播放位置 |
showFullscreenBtn | boolean | true | 否 | 是否显示全屏按钮 |
showPlayBtn | boolean | true | 否 | 是否显示视频底部控制栏的播放按钮 |
showCenterPlayBtn | boolean | true | 否 | 是否显示视频中间的播放按钮 |
objectFit | string | contain | 否 | 当视频大小与 video 容器大小不一致时,视频的表现形式 |
poster | string | 否 | 视频封面的图片网络资源地址 | |
showMuteBtn | boolean | false | 否 | 是否显示静音按钮 |
borderWidth | number | 0 | 否 | 边框的宽度, 单位 px |
borderStyle | string | solid | 否 | 边框的样式, 可选值: solid 和 dashed |
borderColor | string | #ffffff | 否 | 边框的颜色, 必须为十六进制格式 |
borderRadius | number | 0 | 否 | 边框的圆角, 单位 px |
borderRadiusTopLeft | number | 否 | 边框的左上角圆角大小, 单位 px | |
borderRadiusTopRight | number | 否 | 边框的右上角圆角大小, 单位 px | |
borderRadiusBottomLeft | number | 否 | 边框的左下角圆角大小, 单位 px | |
borderRadiusBottomRight | number | 否 | 边框的右下角圆角大小, 单位 px | |
backgroundColor | string | #ffffff | 否 | 背景颜色, 必须为十六进制格式 |
onPlay | eventhandle | 否 | 当开始/继续播放时触发 play 事件 | |
onPause | eventhandle | 否 | 当暂停播放时触发 pause 事件 | |
onEnded | eventhandle | 否 | 当播放到末尾时触发 ended 事件 | |
onTimeupdate | eventhandle | 否 | 播放进度变化时触发,event.detail = {currentTime, duration} 。 | |
onFullscreenchange | eventhandle | 否 | 视频进入和退出全屏时触发,event.detail = {fullScreen, direction},direction 有效值为 vertical 或 horizontal | |
onWaiting | eventhandle | 否 | 视频出现缓冲时触发 | |
onError | eventhandle | 否 | 视频播放出错时触发 | |
onProgress | eventhandle | 否 | 加载进度变化时触发,只支持一段加载。event.detail = {buffered},百分比 | |
onLoadedmetadata | eventhandle | 否 | 视频元数据加载完成时触发。event.detail = {width, height, duration} | |
onControlstoggle | eventhandle | 否 | 切换 controls 显示隐藏时触发。event.detail = {show} | |
onSeekcomplete | eventhandler | 否 | seek 完成时触发 (position iOS 单位 s, Android 单位 ms) | |
object-fit 的合法值
值 | 说明 |
---|---|
contain | 包含 |
fill | 填充 |
cover | 覆盖 |
Bug & Tip
- tip:
native-video
默认宽度 300px、高度 225px,可通过 tyss 设置宽高。 - tip:相关原理请参考 基于异层渲染的原生组件。
- tip:请注意 原生组件使用限制。
- tip:
native-video
支持三种视频格式:MP4。
- MP4 = MPEG 4 文件使用 H264 视频编解码器和 AAC 音频编解码器
👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。