鸿蒙组件学习_video组件

说明

Video组件用于播放视频文件并控制其播放状态
该组件从API Version 7开始支持。
如果播放网络视频，需要申请权限ohos.permission.INTERNET
如果是新建ArkTS页面,记得先去main_pages.json配置页面路径

子组件

不支持子组件

参数

src 视频播放源的路径，支持本地视频路径和网络路径。
    支持在resources下面的video或rawfile文件夹里放置媒体资源
    支持视频格式:mp4、mkv、webm、TS
currentProgressRate 视频播放倍速
    number取值仅支持0.75、1.0、1.25、1.75、2.0(默认1.0)
previewUri  视频未播放时的预览图片路径
controller  设置视频控制器

属性

muted   是否静音，默认值: false
autoPlay    是否自动播放，默认值: false
controls    控制视频播放的控制栏是否显示
objectFit   设置视频显示模式
loop    是否单个视频循环播放

事件

onStart()   播放时触发该事件
onPause()   暂停时触发该事件
onFinish()  播放结束时触发该事件
onError()   播放失败时触发该事件
onPrepared((duration) =>{}) 视频准备完成时触发该事件,通过duration可以获得视频时长,单位为秒(s)。
onSeeking((number) => {})   操作进度条过程时上报时间信息,单位为s。
onSeeked((number) => {})    操作进度条完成后,上报播放时间信息,单位为s。
onUpdate((number) => {})    播放进度变化时触发该事件,单位为s,更新时间间隔为250ms
onFullscreenChange((fullscreen) => {})  在全屏播放和非全屏播放状态之间切换时触发该事件, 返回值为true表示进入全屏播放状态,为false则表示非全屏播放。

一个VideoController对象可以控制一个或多个video

VideoController对象方法
    start()     开始播放
    pause()     暂停播放
    stop()      停止播放
    setCurrentTime(number) 指定视频播放的进度位置
    requestFullscreen(value) 请求全屏播放
    exitFullscreen()    退出全屏播放

练习

@Entry
@Component
struct Vedio{
  controller: VideoController = new VideoController()
  isPlay: boolean = false
  build(){
    Column(){
      Video({
        src: $rawfile('believe.mp4'),
        previewUri: $r('app.media.icon'),
        controller: this.controller,
        currentProgressRate: PlaybackSpeed.Speed_Forward_2_00_X
      })
        .width('100%')
        .height('80%')
        .onStart(() => {
          this.isPlay = true
        })
        .onPause(() => {
          this.isPlay = false
        })
        .onFinish(() => {
          this.isPlay = false
        })
        .onClick(() => {
          if(this.isPlay == false) {
            this.controller.start()
          }
          else {
            this.controller.pause()
          }
          this.isPlay = !this.isPlay
        })
      Button('退出全屏')
        .onClick(() => {
          this.controller.exitFullscreen()
        })
      Button('进入全屏')
        .onClick(() => {
          this.controller.requestFullscreen(true)
        })
    }

  }
}