鸿蒙界面开发——组件（3）：视频组件video

视频组件video

Video(value: VideoOptions)

VideoOptions对象说明:
src string | Resource 否视频的数据源，支持本地视频和网络视频。

Resource格式可以跨包/跨模块访问资源文件，常用于访问本地视频。

支持rawfile文件下的资源，即通过$rawfile引用视频文件。

string格式可用于加载网络视频和本地视频，常用于加载网络视频。

支持网络视频地址。
支持file://路径前缀的字符串，即应用沙箱URI：file:///。用于读取应用沙箱路径内的资源。需要保证目录包路径下的文件有可读权限。

说明：
视频支持的格式是：mp4、mkv、TS。
元服务API：从API version 11开始，该接口支持在元服务中使用。

currentProgressRate number | string | PlaybackSpeed8+ 否
视频播放倍速。
说明：
number取值仅支持：0.75，1.0，1.25，1.75，2.0。
默认值：1.0 | PlaybackSpeed.Speed_Forward_1_00_X
元服务API：从API version 11开始，该接口支持在元服务中使用。

previewUri string | PixelMap | Resource 否
视频未播放时的预览图片路径，默认不显示图片。
元服务API：从API version 11开始，该接口支持在元服务中使用。

controller VideoController 否
设置视频控制器，可以控制视频的播放状态。
元服务API：从API version 11开始，该接口支持在元服务中使用。

imageAIOptions ImageAIOptions 否
设置图像AI分析选项，可配置分析类型或绑定一个分析控制器。
元服务API：从API version 12开始，该接口支持在元服务中使用。

加载视频资源

Video组件支持加载本地视频和网络视频。

加载本地视频

本地视频。
加载本地视频时，首先在本地rawfile目录指定对应的文件。再使用资源访问符$rawfile()引用视频资源。

src: $rawfile('videoTest.mp4');

Data Ability提供的视频路径带有dataability://前缀，使用时确保对应视频资源存在即可。

private videoSrc: string = 'dataability://device_id/com.domainname.dataability.videodata/video/10'
Video({src: this.videoSrc,previewUri: this.previewUris,controller: this.controller})

加载沙箱路径视频

支持file:///data/storage路径前缀的字符串，用于读取应用沙箱路径内的资源，需要保证应用沙箱目录路径下的文件存在并且有可读权限。

 private videoSrc: string = 'file:///data/storage/el2/base/haps/entry/files/show.mp4'

加载网络视频

加载网络视频时，需要申请权限ohos.permission.INTERNET，具体申请方式请参考声明权限。此时，Video的src属性为网络视频的链接。

属性

muted(value: boolean)设置是否静音。默认值：false
autoPlay(value: boolean) 设置是否自动播放。默认值：false
controls(value: boolean)设置控制视频播放的控制栏是否显示。默认值：true
objectFit(value: ImageFit)设置视频显示模式。默认值：Cover
loop(value: boolean)设置是否单个视频循环播放。默认值：false
enableAnalyzer(enable: boolean)设置组件支持AI分析。
analyzerConfig(config: ImageAnalyzerConfig)设置AI分析识别类型，包括主体识别和文字识别功能，默认全部开启。

事件

onStart(event:() => void)播放时触发该事件。
onPause(event:() => void)暂停时触发该事件。
onFinish(event:() => void)播放结束时触发该事件。
onError(event:() => void)播放失败时触发该事件。
onStop(event:() => void)播放停止时触发该事件(当stop()方法被调用后触发)。
onPrepared(callback:(event: { duration: number }) => void)视频准备完成时触发该事件。
onSeeking(callback:(event: { time: number }) => void)操作进度条过程时上报时间信息。
onSeeked(callback:(event: { time: number }) => void)操作进度条完成后，上报播放时间信息。
onUpdate(callback:(event: { time: number }) => void)播放进度变化时触发该事件。
onFullscreenChange(callback:(event: { fullscreen: boolean }) => void)在全屏播放与非全屏播放状态之间切换时触发该事件。

VideoController

Video控制器主要用于控制视频的状态，包括播放、暂停、停止以及设置进度等
默认的控制器支持视频的开始、暂停、进度调整、全屏显示四项基本功能。

使用自定义的控制器，先将默认控制器关闭掉，之后可以使用button以及slider等组件进行自定义的控制与显示，适合自定义较强的场景下使用。

  controller: VideoController = new VideoController()Video({src: this.videoSrc,previewUri: this.previewUri,currentProgressRate: this.curRate,controller: this.controller})

@Entry
@Component
struct VideoGuide1 {@State videoSrc: Resource = $rawfile('videoTest.mp4')@State previewUri: string = 'common/videoIcon.png'@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X@State isAutoPlay: boolean = false@State showControls: boolean = true@State sliderStartTime: string = '';@State currentTime: number = 0;@State durationTime: number = 0;@State durationStringTime: string ='';controller: VideoController = new VideoController()build() {Row() {Column() {Video({src: this.videoSrc,previewUri: this.previewUri,currentProgressRate: this.curRate,controller: this.controller}).controls(false).autoPlay(true).onPrepared((event)=>{if(event){this.durationTime = event.duration}}).onUpdate((event)=>{if(event){this.currentTime =event.time}})Row() {Text(JSON.stringify(this.currentTime) + 's')Slider({value: this.currentTime,min: 0,max: this.durationTime}).onChange((value: number, mode: SliderChangeMode) => {this.controller.setCurrentTime(value);}).width("90%")Text(JSON.stringify(this.durationTime) + 's')}.opacity(0.8).width("100%")}.width('100%')}.height('40%')}
}