視頻播放（Video）

創(chuàng)建視頻組件

Video通過調(diào)用接口來創(chuàng)建，接口調(diào)用形式如下：

Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})

該接口用于創(chuàng)建視頻播放組件。其中，src指定視頻播放源的路徑，加載方式請參考加載視頻資源，currentProgressRate用于設(shè)置視頻播放倍速，previewUri指定視頻未播放時的預(yù)覽圖片路徑，controller設(shè)置視頻控制器，用于自定義控制視頻。

加載視頻資源

Video組件支持加載本地視頻和網(wǎng)絡(luò)視頻。

加載本地視頻

• 普通本地視頻。

  加載本地視頻時，首先在本地rawfile目錄指定對應(yīng)的文件，如下圖所示。

  

  再使用資源訪問符$rawfile()引用視頻資源。

  @Component
  export struct VideoPlayer{
     private controller:VideoController;
     private previewUris: Resource = $r ('app.media.preview');
     private innerResource: Resource = $rawfile('videoTest.mp4');
     build(){
       Column() {
         Video({
           src: this.innerResource,
           previewUri: this.previewUris,
           controller: this.controller
         })
     }
   }
  }

加載沙箱路徑視頻

支持file:///data/storage路徑前綴的字符串，用于讀取應(yīng)用沙箱路徑內(nèi)的資源。需要保證應(yīng)用沙箱目錄路徑下的文件存在并且有可讀權(quán)限。

@Component
export struct VideoPlayer {
  private controller: VideoController;
  private videoSrc: string = 'file:///data/storage/el2/base/haps/entry/files/show.mp4'

  build() {
    Column() {
      Video({
        src: this.videoSrc,
        controller: this.controller
      })
    }
  }
}

加載網(wǎng)絡(luò)視頻

加載網(wǎng)絡(luò)視頻時，需要申請權(quán)限ohos.permission.INTERNET，具體申請方式請參考權(quán)限申請聲明。此時，Video的src屬性為網(wǎng)絡(luò)視頻的鏈接。

@Component
export struct VideoPlayer{
   private controller:VideoController;
   private previewUris: Resource = $r ('app.media.preview');
   private videoSrc: string= 'https://www.example.com/example.mp4' // 使用時請?zhí)鎿Q為實際視頻加載網(wǎng)址
   build(){
     Column() {
       Video({
         src: this.videoSrc,
         previewUri: this.previewUris,
         controller: this.controller
       })
   }
 }
}

添加屬性

Video組件屬性主要用于設(shè)置視頻的播放形式。例如設(shè)置視頻播放是否靜音、播放時是否顯示控制條等。

@Component
export struct VideoPlayer {
  private controller: VideoController;

  build() {
    Column() {
      Video({
        controller: this.controller
      })
        .muted(false) //設(shè)置是否靜音
        .controls(false) //設(shè)置是否顯示默認(rèn)控制條
        .autoPlay(false) //設(shè)置是否自動播放
        .loop(false) //設(shè)置是否循環(huán)播放
        .objectFit(ImageFit.Contain) //設(shè)置視頻適配模式
    }
  }
}

事件調(diào)用

@Entry
@Component
struct VideoPlayer{
  private controller:VideoController;
  private previewUris: Resource = $r ('app.media.preview');
  private innerResource: Resource = $rawfile('videoTest.mp4');
  build(){
    Column() {
      Video({
        src: this.innerResource,
        previewUri: this.previewUris,
        controller: this.controller
      })
        .onUpdate((event) => {   //更新事件回調(diào)
          console.info("Video update.");
        })
        .onPrepared((event) => {  //準(zhǔn)備事件回調(diào)
          console.info("Video prepared.");
        })
        .onError(() => {          //失敗事件回調(diào)
          console.info("Video error.");
        })
    }
  }
}

Video控制器使用

Video控制器主要用于控制視頻的狀態(tài)，包括播放、暫停、停止以及設(shè)置進(jìn)度等，詳細(xì)的使用請參考VideoController使用說明。

• 默認(rèn)控制器

  默認(rèn)的控制器支持視頻的開始、暫停、進(jìn)度調(diào)整、全屏顯示四項基本功能。

  @Entry
  @Component
  struct VideoGuide {
    @State videoSrc: Resource = $rawfile('videoTest.mp4')
    @State previewUri: string = 'common/videoIcon.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%')
    }
  }

• 自定義控制器
  使用自定義的控制器，先將默認(rèn)控制器關(guān)閉掉，之后可以使用button以及slider等組件進(jìn)行自定義的控制與顯示，適合自定義較強(qiáng)的場景下使用。

  @Entry
  @Component
  struct VideoGuide {
    @State videoSrc: Resource = $rawfile('videoTest.mp4')
    @State previewUri: string = 'common/videoIcon.png'
    @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
    @State isAutoPlay: boolean = false
    @State showControls: boolean = true
    @State sliderStartTime: string = '';
    @State currentTime: number = 0;
    @State durationTime: number = 0;
    @State durationStringTime: string ='';
    controller: VideoController = new VideoController()
  
    build() {
      Row() {
        Column() {
          Video({
            src: this.videoSrc,
            previewUri: this.previewUri,
            currentProgressRate: this.curRate,
            controller: this.controller
          }).controls(false).autoPlay(true)
          .onPrepared((event)=>{
            this.durationTime = event.duration
          })
          .onUpdate((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('40%')
    }
  }

其他說明

Video組件已經(jīng)封裝好了視頻播放的基礎(chǔ)能力，開發(fā)者無需進(jìn)行視頻實例的創(chuàng)建，視頻信息的設(shè)置獲取，只需要設(shè)置數(shù)據(jù)源以及基礎(chǔ)信息即可播放視頻，相對擴(kuò)展能力較弱。如果開發(fā)者想自定義視頻播放，還請參考媒體系統(tǒng)播放音視頻。