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

视频组件video

javascript 复制代码

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()引用视频资源。

javascript 复制代码

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

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

javascript 复制代码

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路径前缀的字符串，用于读取应用沙箱路径内的资源，需要保证应用沙箱目录路径下的文件存在并且有可读权限。

javascript 复制代码

 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等组件进行自定义的控制与显示，适合自定义较强的场景下使用。

javascript 复制代码

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

javascript 复制代码

@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%')
  }
}

Video组件已经封装好了视频播放的基础能力，开发者无需进行视频实例的创建，视频信息的设置获取，只需要设置数据源以及基础信息即可播放视频，相对扩展能力较弱。如果开发者想自定义视频播放，可参考媒体系统播放音视频。