鸿蒙 Video组件的基本使用（HarmonyOS-VideoView）

项目创建传送门(非小白可忽略)：

传送门内容概览：

1、增加权限（sec/main /module.json5） <-网络视频播放所需

TypeScript 复制代码

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
    
    ...
    
  }
}

2、代码示例：pages目录下的Index.ets

举例Video的资源引用，如：src : $rawfile('xxx.mp4') 等
举例Video的本身方法调用，如：播放停止监听：onStop() 等
举例Video控制器方法调用，如：this.controller.setCurrentTime(value) 等

TypeScript 复制代码

@Entry
@Component
struct Index {
  // 控制器
  controller: VideoController = new VideoController();
  // 当前时常
  @State currentTime: number = 0;
  // 总时长
  @State durationTime: number = 0;
  build() {
    Column() { //垂直居中
      // --------------------- Video -------------------------
      //src : $rawfile('xxx.mp4') //本地视频
      //src : 'file:///data/storage/el2/base/haps/entry/files/xxx.mp4' //沙箱路径视频
      //previewUri :  $r('app.media.xxx') //预览图（封面）
      Video({
        src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
        controller: this.controller, //设置视频控制器，可以控制视频的播放状态
        currentProgressRate: PlaybackSpeed.Speed_Forward_1_00_X, //设置视频播放倍速
      })
      //相关属性------
        .muted(false) // 设置是否静音
        .controls(false) // 设置是否显示默认控制条
        .autoPlay(false) // 设置是否自动播放
        .loop(false) // 设置是否循环播放
        .objectFit(ImageFit.Contain) // 设置视频填充模式
        //相关事件------
        .onUpdate((event) => { // 更新事件
          if (event) {
            // 同步当前播放中的时常
            this.currentTime = event.time
          }
        })
        .onPrepared((event) => { // 准备就绪
          if (event) {
            // 获取总时长
            this.durationTime = event.duration
          }
        })
        .onError(() => { // 失败/异常
        })
        .onStart(() => { // 开始
        })
        .onStop(() => { // 停止
        })
      //控制器相关------
      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); // 设置视频播放的进度跳转到value处
          })
          .width('90%')
        Text(JSON.stringify(this.durationTime) + 's')
      }
      .opacity(0.8)
      .width('100%')
      //自定义播放按钮：
      //点击开始播放：this.controller.start()
      //点击暂停播放：this.controller.pause()
      //点击停止播放：this.controller.stop()

    }

  }
}

如果您感觉文章有用的话，麻烦点个赞吧！
如果您发现文章有任何错误或建议，请评论区留言或者私信！
深海谢过各位的支持，一起加油！