首页 > 编程笔记 > 通用技能 阅读：113

鸿蒙Video组件的使用（非常详细，附带实例）

Video 组件用于播放视频文件并控制其播放状态，广泛应用于短视频和应用内部视频列表页面。当视频完全加载时，它会自动开始播放；当用户点击视频区域时，视频暂停播放，同时显示播放进度条，用户可以通过拖动进度条来指定视频播放的具体位置。

创建Video组件

Video 组件通过调用接口来创建，接口调用形式如下： 
Video(value: VideoOptions)
VideoOptions 对象包含参数 src、currentProgressRate、previewUri、controller：
Video 组件支持加载本地视频和网络视频。

1) 加载本地视频

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


图 1 本地视频存放位置

示例代码如下： 
@Entry
@Component
struct VideoPlayer{
  private controller:VideoController | undefined;
  private previewUris: Resource = $r ("app.media.preview1");
  private innerResource: Resource = $rawfile('VideoDemo.mp4')
  build(){
    Column() {
      Video({
        src: this.innerResource,
        previewUri: this.previewUris,
        controller: this.controller
      })
    }
  }
}
播放页效果如下图所示：


图 2 使用资源访问符$rawfile()引用视频资源的播放效果

2) 加载网络视频

加载网络视频时，需要申请权限 ohos.permission.INTERNET。此时，Video 的 src 属性为网络视频的链接。示例代码如下： 
@Entry
@Component
struct VideoPlayer{
  private controller:VideoController | undefined;
  private previewUris: Resource = $r ('app.media.preview1');
  // 使用时请替换为实际视频加载网址
  private videoSrc: string= 'https://www.w3school.com.cn/i/movie.mp4'
  build(){
    Column() {
      Video({
        src: this.videoSrc,
        previewUri: this.previewUris,
        controller: this.controller
      })
    }
  }
}

添加Video属性

Video 组件的属性主要用于设置视频的播放形式。例如，设置视频播放时是否静音，播放时是否显示控制条等。 
@Component
export struct VideoPlayer {
  private controller: VideoController | undefined;

  build() {
    Column() {
      Video({
        controller: this.controller
      })
        .muted(false)                          // 设置是否静音
        .controls(false)                       // 设置是否显示默认控制条
        .autoPlay(false)                       // 设置是否自动播放
        .loop(false)                           // 设置是否循环播放
        .objectFit(ImageFit.Contain)           // 设置视频适配模式
    }
  }
}

Video事件调用

Video 组件的回调事件主要包括播放开始、暂停、结束、失败、停止和视频准备以及操作进度条等事件。除此之外，Video 组件还支持通用事件的调用，如点击、触摸等事件的调用。

示例代码如下： 
@Entry
@Component
struct VideoPlayer {
  private controller: VideoController = new VideoController();
  private previewUris: Resource = $r('app.media.preview1');
  private innerResource: Resource = $rawfile('videoDemo.mp4');

  build() {
    Column() {
      Video({
        src: this.innerResource,
        previewUri: this.previewUris,
        controller: this.controller
      })
        .onUpdate(() => {
          // 更新事件回调
          console.info('video update.');
        })
        .onPrepared(() => {
          // 准备事件回调
          console.info('video prepared.');
        })
        .onError(() => {
          // 失败事件回调
          console.info('video error.');
        })
        .onStop(() => {
          // 停止事件回调
          console.info('video stopped.');
        });
    }
  }
}
显示效果如下图所示：


图 3 带事件调用的视频播放

Video控制器的使用

Video 控制器主要用于控制视频的状态，包括播放、暂停、停止以及设置进度等。

1) 默认控制器

默认的控制器支持视频开始、视频暂停、进度调整、全屏显示四项基本功能。示例代码如下： 
@Entry
@Component
struct VideoGuide {
  @State videoSrc: Resource = $rawfile('videoDemo.mp4');
  @State previewUri: string = 'common/preview.png';
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X;

  build() {
    Row() {
      Column() {
        Video({
          src: this.videoSrc,
          previewUri: this.previewUri,
          currentProgressRate: this.curRate
        })
      }   
      .width('100%') 
    }
    .height('100%');
  }
}
显示效果如下图所示：


图 4 带视频播放控制的视频播放效果

2) 自定义控制器

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

示例代码如下： 
@Entry
@Component
struct VideoSample {
  // 设置视频资源
  @State videoSrc: Resource = $rawfile('videoDemo.mp4');
  // 设置预览图片
  @State previewUri: string = 'common/preview.png';
  // 设置回放速度为1.0倍
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X;
  // 设置是否自动播放：true
  @State isAutoPlay: boolean = true;
  // 设置是否显示控制工具：true
  @State showControls: boolean = true;
  // 设置当前进度时长
  @State currentTime: number = 0;
  // 设置视频总时长
  @State durationTime: number = 0;
  // 视频控制器
  controller: VideoController = new VideoController();

  build() {
    Column() {
      // 视频组件
      Video({
        src: this.videoSrc,
        // 设置视频源文件
        previewUri: this.previewUri,
        // 设置视频预览的图片
        currentProgressRate: this.curRate,
        // 设置视频播放的当前进度
        controller: this.controller
        // 设置视频播放控制器实例
      })
        .controls(this.showControls)
        .autoPlay(this.isAutoPlay)
        .onPrepared((event) => {
          // 在onPrepared中，读取视频的时长
          if (event) {
            this.durationTime = event.duration;
          }
        })
        .onUpdate((event) => {
          // 在onUpdate中，读取视频当前播放到的时长
          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('100%');
  }
}
显示效果如下图所示：


图 5 使用自定义控制器的视频播放显示效果

注意，Video 组件已经封装好了视频播放的基础功能，开发者无须进行视频实例的创建和视频信息的获取，只需设置数据源以及基础信息即可播放视频。因此其相对扩展能力较弱。

相关文章