智能小程序 Ray 开发——媒体组件 Video 和 NativeVideo 实操讲解

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

1. tip：native-video 默认宽度 300px、高度 225px，可通过 tyss 设置宽高。
2. tip：相关原理请参考 基于异层渲染的原生组件。
3. tip：请注意 原生组件使用限制。
4. tip：native-video 支持三种视频格式：MP4。

• MP4 = MPEG 4 文件使用 H264 视频编解码器和 AAC 音频编解码器

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。