【HarmonyOS】鸿蒙开发之Video组件——第3.7章

Video组件内VideoOptions属性简介

src：设置视频地址。
currentProgressRate：设置视频播放倍速，参数说明如下：
- number|string：只支持 0.75 ， 1.0 ， 1.25 ， 1.75 ， 2.0 。
- PlaybackSpeed：对 number | string 的封装，防止用户传错参数的。
previewUri：视频封面图的路径。
controller：设置视频播放的控制器，比如控制视频开始，暂停等。

代码实例:

bash 复制代码

// Web控制器
  private videoController: VideoController = new VideoController()
  build(){
    Column(){
      Video({
        src: $r("app.media.test"),             // 设置数据源
        previewUri: "https://tenfei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",     // 设置封面图片
        controller: this.videoController      // 设置控制器
      })
        .width(300)
        .height(210)

      Row({space: 10}) {
        Button("播放")
          .onClick(() => {
            this.videoController.start()
          })
        Button("暂停")
          .onClick(() => {
            this.videoController.pause()
          })

        Button("继续")
          .onClick(() => {
            this.videoController.start()
          })
      }.margin({bottom:10,top:10})

      Row() {
        Button("全屏")
          .onClick(() => {
            this.videoController.requestFullscreen(true)
          })
        Button("退出全屏")
          .onClick(() => {
            this.videoController.exitFullscreen()
          })
      }

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

Video组件事件介绍

bash 复制代码

//播放视频
onStart(event: () => void): VideoAttribute;
//暂停视频
onPause(event: () => void): VideoAttribute;
//视频完成时触发
onFinish(event: () => void): VideoAttribute;
//在全屏播放与非全屏播放状态之间切换时触发该事件
onFullscreenChange(callback: (event?: { fullscreen: boolean }) => void): VideoAttribute;
//视频准备完成时触发该事件,通过duration可以获取视频时长,单位为s
onPrepared(callback: (event?: { duration: number }) => void): VideoAttribute;
//当用户开始移动/跳到音频/视频中的新位置时
onSeeking(callback: (event?: { time: number }) => void): VideoAttribute;
//当用户重新定位视频的播放位置后执行
onSeeked(callback: (event?: { time: number }) => void): VideoAttribute;
//播放进度变化时触发该事件,单位为s,更新时间间隔为250ms
onUpdate(callback: (event?: { time: number }) => void): VideoAttribute;
//播放失败时触发该事件
onError(event: () => void): VideoAttribute;

代码实例

bash 复制代码

 Video({
       ...
      })
        .onUpdate((event) => {
          this.currentTime = event.time;
          this.currentStringTime = this.handleChangeSliderTime(this.currentTime); //更新事件
        })
        .onPrepared((event) => {
          console.log("视频时长:"+event.duration);
        })
        .onError(() => {
          promptAction.showToast({
            duration: 2000, //播放失败事件
            message: "播放失败"
          });
        })
        .width(300)
        .height(210)

注意:如果视频播放路径为第三方链接，需要开启网络权限。如图:

✨ 踩坑不易，还希望各位大佬支持一下 \textcolor{gray}{踩坑不易，还希望各位大佬支持一下} 踩坑不易，还希望各位大佬支持一下

📃 个人主页： \textcolor{green}{个人主页：} 个人主页：沉默小管

📃 个人网站： \textcolor{green}{个人网站：} 个人网站：沉默小管

📃 个人导航网站： \textcolor{green}{个人导航网站：} 个人导航网站：沉默小管导航网

📃 我的开源项目： \textcolor{green}{我的开源项目：} 我的开源项目： vueCms.cn

🔥 技术交流 Q Q 群： 837051545 \textcolor{green}{技术交流QQ群：837051545} 技术交流QQ群：837051545

👍 点赞，你的认可是我创作的动力！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！

如果有不懂可以留言，我看到了应该会回复

如有错误，请多多指教