华为 HarmonyOS NEXT 原生应用开发: Video实现在线离线视频播放、以及实现控制器控制视频操作。

文章目录

• 视频播放
• • • 一、基础使用（在线、离线）
    • • • 代码示例：
    • [二、自定义video 视频播放](#二、自定义video 视频播放)
    • • • 代码示例：

视频播放

一、基础使用（在线、离线）

代码示例：

/**
 * 视频演示
 */
@Entry
@Component
struct PayIndex {
  build() {
    Column() {
      Tabs() {
        TabContent() {
          Video({
            src: "http://video19.ifeng.com/video09/2024/05/23/p7199260608686989961-0-122707.mp4"
          })
            .width("90%")
            .height("60%")
            .borderRadius(15)
            .autoPlay(true)
        }.tabBar("在线视频")
        TabContent() {
          Video({
            src: $rawfile("harmonyos_next_video.mp4")
          })
            .width("90%")
            .height("60%")
            .borderRadius(15)
            .autoPlay(true)
        }.tabBar("离线视频")
      }

    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

二、自定义video 视频播放

代码示例：

/**
 * 演示，自定义实现视频播放功能
 */
@Entry
@Component
struct PayIndex {
  // 创建视频组件控制器
  controllerVideo: VideoController = new VideoController()

  @State isFullScreen: boolean = false  // 是否全屏
  @State isMuted: boolean = false  // 是否静音
  @State SelectedSpeed: ResourceStr = "1"  // 用于默认展示选择的倍速
  @State currentIndex: number = 0  // 当前选择的倍速索引
  @State playTime: number = 0 // 当前播放的时长
  @State duration: number = 0  // 视频加载完毕的总时长

  build() {
    Column({ space: 10}) {
      Video({
        // 视频来源（在线 / 离线）
        src: $rawfile("harmonyos_next_video.mp4"),
        // video控制器
        controller: this.controllerVideo,
        // 控制倍速播放（搭配 Select选项值使用）
        currentProgressRate: this.SelectedSpeed.toString(),
        // 设置视频封面
        previewUri: $r("app.media.banner_pic2"),

      })
        .borderRadius(15)
        .width("100%")
        .height(500)
        .objectFit(ImageFit.Contain) // 控制展示的宽高比例方式
        .autoPlay(false)   // 自动播放
        .loop(true)    // 循环播放
        .controls(this.isFullScreen)   // 是否展示控制条
        .muted(this.isMuted)   // 静音播放
        .onFullscreenChange((screen) => {  // 控制全屏播放
          // 事件监听视频是否全屏的状态，返回Boolean值，将这个值赋值给状态变量，然后实现全屏出现控制器
          this.isFullScreen = screen.fullscreen
        })
        // 实时获取当前播放进度（实时触发）
        .onUpdate((time) => {
          this.playTime = time.time
        })
        // 视频加载完毕触发（获取视频总时长）
        .onPrepared((totalTime) => {
          this.duration = totalTime.duration
        })
      // -----------------------------------
      Row() {
        Button("播放")
          .onClick(() => {
            this.controllerVideo.start()
          })
        Button("暂停")
          .onClick(() => {
            this.controllerVideo.pause()
          })
        Button("停止")
          .onClick(() => {
            this.controllerVideo.stop()
          })
        Button("全屏")
          .onClick(() => {
            this.controllerVideo.requestFullscreen(true)
          })
        Button("静音")
          .onClick(() => {
            this.isMuted = ! this.isMuted
          })

        // 调整倍速
        Select([{value: "1"}, {value: "1.25"}, {value: "1.5"}, {value: "1.75"}, {value: "2"}])
          .selected(this.currentIndex)
          .value($$this.SelectedSpeed)
          .onSelect((index) => {
            this.currentIndex = index
          })
      }
      .width("100%")
      .justifyContent(FlexAlign.SpaceEvenly)

      // 进度控制条
      Row({ space: 15 }) {
        Text("进度")
        Slider({
          value: this.playTime,  // 当前播放进度
          min: 0,   // 视频最小值
          max: this.duration  // 视频总时长
        })
          .layoutWeight(1)
            // 滑块滑动触发回调，返回当前滑块所处的值，我们通过video控制器控制视频的播放进度
          .onChange((value) => {
            this.controllerVideo.setCurrentTime(value, SeekMode.Accurate)
          })
        // 展示当前播放时长和总时长
        Text(){
          Span(this.playTime + "/" + this.duration)
        }
      }
      .width("100%")
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
    .padding(10)
  }
}