介紹

使用ArkTS語言實現(xiàn)視頻播放器，主要包括主頁面和視頻播放頁面，我們將一起完成以下功能：

1. 獲取本地視頻和網(wǎng)絡視頻。
2. 通過AVPlayer進行視頻播放。
3. 通過手勢調節(jié)屏幕亮度和視頻播放音量。

相關概念

• [AVPlayer]：播放管理類，用于管理和播放媒體資源。
• [XComponent]：可用于EGL/OpenGLES和媒體數(shù)據(jù)寫入，并顯示在XComponent組件。
• [PanGesture]手勢：用于觸發(fā)拖動手勢事件，滑動的最小距離為5vp時拖動手勢識別成功。

相關權限

本篇Codelab使用了網(wǎng)絡連接，需要在配置文件module.json5文件里添加權限：ohos.permission.INTERNET。

環(huán)境搭建

軟件要求

• [DevEco Studio]版本：DevEco Studio 3.1 Release。
• OpenHarmony SDK版本：API version 9。

硬件要求

• 開發(fā)板類型：[潤和RK3568開發(fā)板]。
• OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建，本示例以RK3568開發(fā)板為例，參照以下步驟進行：

1. [獲取OpenHarmony系統(tǒng)版本]：標準系統(tǒng)解決方案（二進制）。以3.2 Release版本為例：
   
2. 搭建燒錄環(huán)境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發(fā)板的燒錄]
3. 搭建開發(fā)環(huán)境。
   1. 開始前請參考[工具準備]，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
   2. 開發(fā)環(huán)境配置完成后，請參考[使用工程向導]創(chuàng)建工程（模板選擇“Empty Ability”）。
   3. 工程創(chuàng)建完成后，選擇使用[真機進行調測]。
   4. 鴻蒙開發(fā)指導文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結構解讀

本篇Codelab只對核心代碼進行講解，對于完整代碼，我們會在gitee中提供。

HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿
├──entry/src/main/ets	                   // 代碼區(qū)
│  ├──common
│  │  ├──constants
│  │  │  ├──CommonConstants.ets	           // 公共常量類
│  │  │  ├──HomeConstants.ets	           // 首頁常量類
│  │  │  └──PlayConstants.ets	           // 視頻播放頁面常量類
│  │  ├──model
│  │  │  ├──HomeTabModel.ets	           // 首頁參數(shù)模型
│  │  │  └──PlayerModel.ets	               // 播放參數(shù)模型
│  │  └──util
│  │     ├──DateFormatUtil.ets	           // 日期工具類
│  │     ├──GlobalContext.ets	           // 全局工具類
│  │     ├──Logger.ets	                   // 日志工具類
│  │     └──ScreenUtil.ets                 // 屏幕工具類
│  ├──controller
│  │  └──VideoController.ets	           // 視頻控制類
│  ├──entryability
│  │  └──EntryAbility.ts                   // 程序入口類
│  ├──pages
│  │  ├──HomePage.ets                      // 首頁頁面
│  │  └──PlayPage.ets                      // 視頻播放頁面
│  ├──view
│  │  ├──HomeTabContent.ets                // 首頁Tab頁面
│  │  ├──HomeTabContentButton.ets          // 首頁按鈕子組件
│  │  ├──HomeTabContentDialog.ets          // 添加網(wǎng)絡視頻彈框子組件
│  │  ├──HomeTabContentList.ets            // 視頻列表子組件
│  │  ├──HomeTabContentListItem.ets        // 視頻對象子組件
│  │  ├──PlayControl.ets                   // 播放控制子組件
│  │  ├──PlayPlayer.ets                    // 視頻播放子組件
│  │  ├──PlayProgress.ets                  // 播放進度子組件
│  │  ├──PlayTitle.ets                     // 播放標題子組件
│  │  └──PlayTitleDialog.ets               // 播放速度設置子組件
│  └──viewmodel
│     ├──HomeDialogModel.ets         	   // 添加網(wǎng)絡視頻彈框類
│     ├──HomeVideoListModel.ets            // 獲取視頻列表數(shù)據(jù)類
│     ├──VideoItem.ets         	           // 視頻對象
│     └──VideoSpeed.ets                    // 播放速度類
└──entry/src/main/resource                 // 應用靜態(tài)資源目錄

獲取視頻

視頻來源主要有本地視和網(wǎng)絡視頻兩種方式，效果如圖所示：

獲取本地視頻，通過resourceManager.getRawFd方法獲取rawfile文件夾中的視頻資源文件描述符，構造本地視頻對象。

// HomeVideoListModel.ets
// 獲取本地視頻
async getLocalVideo() {
  this.videoLocalList = [];
  await this.assemblingVideoBean();
  GlobalContext.getContext().setObject('videoLocalList', this.videoLocalList);
  return this.videoLocalList;
}

// HomeVideoListModel.ets
// 組裝本地視頻對象
async assemblingVideoBean() {
  VIDEO_DATA.forEach(async (item: VideoItem) = > {
    let videoBean = await getContext().resourceManager.getRawFd(item.iSrc);
    let uri = videoBean;
    this.videoLocalList.push(new VideoItem(item.name, uri, ''));
  });
}

網(wǎng)絡視頻是通過手動輸入地址，在有網(wǎng)的環(huán)境下點擊“鏈接校驗”，通過地址獲取視頻時長，當視頻時長小于等于零時彈出“鏈接校驗失敗”提示，否則彈出“鏈接校驗成功”提示。

// HomeDialogModel.ets
// 設置網(wǎng)絡視頻路徑
async checkSrcValidity(checkFlag: number) {
  if (this.isLoading) {
    return;
  }
  this.isLoading = true;
  this.homeTabModel.linkCheck = $r('app.string.link_checking');
  this.homeTabModel.loadColor = $r('app.color.index_tab_unselected_font_color');
  this.checkFlag = checkFlag;
  this.createAvPlayer();
}

// 校驗鏈接有效性
checkUrlValidity() {
  this.isLoading = false;
  this.homeTabModel.linkCheck = $r('app.string.link_check');
  this.homeTabModel.loadColor = $r('app.color.index_tab_selected_font_color');
  if (this.avPlayer !== null) {
    this.avPlayer.release();
  }
  if (this.duration === HomeConstants.DURATION_TWO) {
    // Failed to verify the link
    this.showPrompt($r('app.string.link_check_fail'));
  } else if (this.duration === HomeConstants.DURATION_ONE) {
    // The address is incorrect or no network is available
    this.showPrompt($r('app.string.link_check_address_internet'));
  } else {
    this.duration = 0;
    if (this.checkFlag === 0) {
      this.showPrompt($r('app.string.link_check_success'));
    } else {
      this.homeTabModel!.confirm();
      this.homeTabModel!.controller!.close();
    }
  }
}

視頻播放

視頻播放主要包括視頻的暫停、播放、切換、倍速播放、拖動進度條設置當前進度、顯示當前播放時間、音量調節(jié)等功能，本章節(jié)主要針對播放管理類（下面簡稱：AVPlayer）進行講解，具體細節(jié)請參考gitee源碼，效果如圖所示：

播放的全流程包含：創(chuàng)建AVPlayer，設置播放資源，設置播放參數(shù)（音量/倍速），播放控制（播放/暫停/上一個視頻/下一個視頻），重置，銷毀資源。狀態(tài)機變化如圖所示：

視頻播放之前需要初始化XComponent組件用于展示視頻畫面。XComponent組件初始化成功之后在onLoad()中獲取surfaceID用于與AVPlayer實例關聯(lián)。

// PlayPlayer.ets
XComponent({
  ...
  controller: this.xComponentController
})
  .onLoad(async () = > {
    ...
    this.surfaceID = this.xComponentController.getXComponentSurfaceId();
    ...
  })
  ...

使用AVPlayer前需要通過createAVPlayer()構建一個實例對象，并為AVPlayer實例綁定狀態(tài)機，狀態(tài)機具體請參考[AVPlayerState]

// VideoController.ets
async createAVPlayer() {
  let avPlayer: media.AVPlayer = await media.createAVPlayer();
  this.avPlayer = avPlayer;
  this.bindState();
}

// VideoController.ets
async bindState() {
  if (this.avPlayer === null) {
    return;
  }
  this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) = > {
    let avplayerStatus: string = state;
    if (this.avPlayer === null) {
      return;
    }
    switch (avplayerStatus) {
      case AvplayerStatus.IDLE:
        ...
      case AvplayerStatus.INITIALIZED:
        ...
      case AvplayerStatus.PREPARED:
        ...
      case AvplayerStatus.PLAYING:
        ...
      case AvplayerStatus.PAUSED:
        ...
      case AvplayerStatus.COMPLETED:
        ...
      case AvplayerStatus.RELEASED:
        ...
      default:
        ...
    }
  });
  this.avPlayer.on(Events.TIME_UPDATE, (time: number) = > {
    this.initProgress(time);
  });
  this.avPlayer.on(Events.ERROR, () = > {
    this.playError();
  })
}

AVPlayer實例需設置播放路徑和XComponent中獲取的surfaceID，設置播放路徑之后AVPlayer狀態(tài)機變?yōu)閕nitialized狀態(tài)，在此狀態(tài)下調用prepare()，進入prepared狀態(tài)。

// VideoController.ets
async firstPlay(index: number, url: resourceManager.RawFileDescriptor, iUrl: string, surfaceId: string) {
  this.index = index;
  this.url = url;
  this.iUrl = iUrl;
  this.surfaceId = surfaceId;
  if (this.avPlayer === null) {
    await this.createAVPlayer();
  }
  if (this.avPlayer !== null) {
    if (this.iUrl) {
      this.avPlayer.url = this.iUrl;
    } else {
      this.avPlayer.fdSrc = this.url;
    }
  }
}

// VideoController.ets
async bindState() {
  ...
  this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) = > {
    let avplayerStatus: string = state;
    if (this.avPlayer === null) {
      return;
    }
    switch (avplayerStatus) {
      case AvplayerStatus.IDLE:
        ...
      case AvplayerStatus.INITIALIZED:
        this.avPlayer.surfaceId = this.surfaceId;
        this.avPlayer.prepare();
        break;
      ...
    }
  });
  ...
}

在prepared狀態(tài)下可獲取當前播放路徑對應視頻的總時長，并執(zhí)行play()進行視頻播放。

// VideoController.ets
async bindState() {
  ...
  this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) = > {
    ...
    switch (avplayerStatus) {
      ...
      case AvplayerStatus.PREPARED:
        this.avPlayer.videoScaleType = 0;
        this.setVideoSize();
        this.avPlayer.play();
        this.duration = this.avPlayer.duration;
        break;
      ...
    }
  });
  ...
}

視頻播放后，變?yōu)閜laying狀態(tài)，可通過“播放/暫停”按鈕切換播放狀態(tài)，當視頻暫停時狀態(tài)機變?yōu)閜aused狀態(tài)。

// VideoController.ets
switchPlayOrPause() {
  if (this.avPlayer === null) {
    return;
  }
  if (this.status === CommonConstants.STATUS_START) {
    this.avPlayer.pause();
  } else {
    this.avPlayer.play();
  }
}

// VideoController.ets
async bindState() {
  ...
  this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) = > {
    ...
    switch (avplayerStatus) {
      ...
      case AvplayerStatus.PLAYING:
        this.avPlayer.setVolume(this.playerModel.volume);
        this.setBright();
        this.status = CommonConstants.STATUS_START;
        this.watchStatus();
        break;
      ...
    }
  });
  ...
}

可拖動進度條設置視頻播放位置，也可滑動音量調節(jié)區(qū)域設置視頻播放音量、設置播放速度。

// VideoController.ets
// 設置當前播放位置
setSeekTime(value: number, mode: SliderChangeMode) {
  if (mode === Number(SliderMode.MOVING)) {
    this.playerModel.progressVal = value;
    this.playerModel.currentTime = DateFormatUtil.secondToTime(Math.floor(value * this.duration /
    CommonConstants.ONE_HUNDRED / CommonConstants.A_THOUSAND));
  }
  if (mode === Number(SliderMode.END) || mode === Number(SliderMode.CLICK)) {
    this.seekTime = value * this.duration / CommonConstants.ONE_HUNDRED;
    if (this.avPlayer !== null) {
      this.avPlayer.seek(this.seekTime, media.SeekMode.SEEK_PREV_SYNC);
    }
  }
}

// VideoController.ets
// 設置播放音量
onVolumeActionUpdate(event?: GestureEvent) {
  if (!event) {
    return;
  }
  if (this.avPlayer === null) {
    return;
  }
  if (CommonConstants.OPERATE_STATE.indexOf(this.avPlayer.state) === -1) {
    return;
  }
  if (this.playerModel.brightShow === false) {
    this.playerModel.volumeShow = true;
    let screenWidth = GlobalContext.getContext().getObject('screenWidth') as number;
    let changeVolume = (event.offsetX - this.positionX) / screenWidth;
    let volume: number = this.playerModel.volume;
    let currentVolume = volume + changeVolume;
    let volumeMinFlag = currentVolume <= PlayConstants.MIN_VALUE;
    let volumeMaxFlag = currentVolume > PlayConstants.MAX_VALUE;
    this.playerModel.volume = volumeMinFlag ? PlayConstants.MIN_VALUE :
      (volumeMaxFlag ? PlayConstants.MAX_VALUE : currentVolume);
    this.avPlayer.setVolume(this.playerModel.volume);
    this.positionX = event.offsetX;
  }
}

// VideoController.ets
// 設置播放速度
setSpeed(playSpeed: number) {
  if (this.avPlayer === null) {
    return;
  }
  if (CommonConstants.OPERATE_STATE.indexOf(this.avPlayer.state) === -1) {
    return;
  }
  this.playerModel.playSpeed = playSpeed;
  this.avPlayer.setSpeed(this.playerModel.playSpeed);
}

視頻播放完成之后，進入completed狀態(tài)，需調用reset()對視頻進行重置，此時變?yōu)閕dle轉態(tài)，在idle狀態(tài)下設置下一個視頻的播放地址，又會進入initialized狀態(tài)。

// VideoController.ets 
sync bindState() {
  ...
  this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) = > {
    let avplayerStatus: string = state;
    ...
    switch (avplayerStatus) {
      case AvplayerStatus.IDLE:
        this.resetProgress();
        if (this.iUrl) {
          this.avPlayer.url = this.iUrl;
        } else {
          this.avPlayer.fdSrc = this.url;
        }
        break;
      case AvplayerStatus.INITIALIZED:
        this.avPlayer.surfaceId = this.surfaceId;
        this.avPlayer.prepare();
        break;
      ...
      case AvplayerStatus.COMPLETED:
        ...
        this.avPlayer.reset();
        break;
      ...
    }
  });
  ...
}

手勢控制

播放頁面通過綁定平移手勢（PanGesture），上下滑動調節(jié)屏幕亮度，左右滑動調節(jié)視頻音量，效果如圖所示：

// PlayPage.ets
Column() {
  ...
  Column()
    ...
    .gesture(
      PanGesture(this.panOptionBright)
        .onActionStart((event?: GestureEvent) = > {
          this.playVideoModel.onBrightActionStart(event);
        })
        .onActionUpdate((event?: GestureEvent) = > {
          this.playVideoModel.onBrightActionUpdate(event);
        })
        .onActionEnd(() = > {
          this.playVideoModel.onActionEnd();
        })
    )
  ...
  Column()
    ...
    .gesture(
      PanGesture(this.panOptionVolume)
        .onActionStart((event?: GestureEvent) = > {
          this.playVideoModel.onVolumeActionStart(event);
        })
        .onActionUpdate((event?: GestureEvent) = > {
          this.playVideoModel.onVolumeActionUpdate(event);
        })
        .onActionEnd(() = > {
          this.playVideoModel.onActionEnd();
        })
    )
  ...
}
...

本章節(jié)以音量調節(jié)介紹手勢控制，當手指觸摸音量調節(jié)區(qū)域時獲取當前屏幕坐標，滑動手指實時獲取屏幕坐標并計算音量。

// VideoController.ets
// 手指觸摸到音量調節(jié)區(qū)域
onVolumeActionStart(event?: GestureEvent) {
  if (!event) {
    return;
  }
  this.positionX = event.offsetX;
}

// 手指在音量調節(jié)區(qū)域水平滑動
onVolumeActionUpdate(event?: GestureEvent) {
  if (!event) {
    return;
  }
  if (this.avPlayer === null) {
    return;
  }
  if (CommonConstants.OPERATE_STATE.indexOf(this.avPlayer.state) === -1) {
    return;
  }
  if (this.playerModel.brightShow === false) {
    this.playerModel.volumeShow = true;
    let screenWidth = GlobalContext.getContext().getObject('screenWidth') as number;
    let changeVolume = (event.offsetX - this.positionX) / screenWidth;
    let volume: number = this.playerModel.volume;
    let currentVolume = volume + changeVolume;
    let volumeMinFlag = currentVolume <= PlayConstants.MIN_VALUE;
    let volumeMaxFlag = currentVolume > PlayConstants.MAX_VALUE;
    this.playerModel.volume = volumeMinFlag ? PlayConstants.MIN_VALUE :
      (volumeMaxFlag ? PlayConstants.MAX_VALUE : currentVolume);
    this.avPlayer.setVolume(this.playerModel.volume);
    this.positionX = event.offsetX;
  }
}

審核編輯 黃宇