##鴻蒙核心技術(shù)##運(yùn)動開發(fā)##Media Kit（媒體服務(wù)）#

在當(dāng)今數(shù)字化時(shí)代，運(yùn)動健身已經(jīng)成為許多人生活的一部分。今天我將在應(yīng)用中添加視頻播放器，幫助用戶在運(yùn)動前、運(yùn)動后更好地進(jìn)行熱身和拉伸。這篇文章將從代碼核心點(diǎn)入手，帶你一步步了解開發(fā)過程中的關(guān)鍵技術(shù)和實(shí)現(xiàn)細(xì)節(jié)。

4A67D5C6-AD7F-4258-A977-41D1EF39B9AA.png

一、項(xiàng)目背景與需求分析

在開發(fā)任何應(yīng)用之前，明確需求是至關(guān)重要的。對于運(yùn)動視頻播放器，我們需要考慮以下幾個(gè)核心功能：

1. 視頻播放：支持播放運(yùn)動相關(guān)的視頻，如熱身、拉伸等。
2. 用戶交互：提供簡單的按鈕操作，如播放、暫停、繼續(xù)等。

二、代碼核心點(diǎn)梳理與解析

接下來，我們將通過代碼的核心部分，逐步解析實(shí)現(xiàn)運(yùn)動視頻播放器的關(guān)鍵步驟。

（一）頁面布局與導(dǎo)航

在鴻蒙開發(fā)中，頁面布局是用戶體驗(yàn)的基礎(chǔ)。我們使用了LibNav和LibPage來構(gòu)建頁面的導(dǎo)航和內(nèi)容布局。以下是代碼的核心部分：

@Component
export struct SportHelperPage {
  @Builder
  pageNavBuilder(){
    LibNav({
      pageTitle: "運(yùn)動助手"
    }).width("100%")
  }

  @Builder
  pageContentBuilder(){
    Column() {
      Text('運(yùn)動助手')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20 })
      Button('跑前熱身')
        .onClick(() => this.playVideo('https://video.111.com/p/bms/warmup_before_running.mp4'))
        .margin({ top: 10 })
      Button('跑后拉伸')
        .onClick(() => this.playVideo('https://video.111.com/p/bms/stretch_after_running.mp4'))
        .margin({ top: 10 })
      Button('暫停播放')
        .onClick(() => {
          this.avPlayer?.pause()
        })
      Button('繼續(xù)播放')
        .onClick(() => {
          this.avPlayer?.play()
        })
      XComponent({ type: XComponentType.SURFACE, controller: mXComponentController })
        .width('100%')
        .height(300)
    }
    .padding(20)
    .backgroundColor(Color.White)
  }
}

1. 頁面導(dǎo)航：通過LibNav設(shè)置頁面標(biāo)題為“運(yùn)動助手”，并將其寬度設(shè)置為100%，以確保導(dǎo)航欄能夠覆蓋整個(gè)屏幕頂部。
2. 頁面內(nèi)容：使用Column布局，將文本、按鈕和視頻播放組件（XComponent）依次排列。每個(gè)按鈕都綁定了點(diǎn)擊事件，用于觸發(fā)視頻播放或控制播放狀態(tài)。

（二）視頻播放器的初始化與控制

視頻播放是應(yīng)用的核心功能，我們使用了鴻蒙的media.AVPlayer來實(shí)現(xiàn)。以下是初始化和播放控制的代碼：

async initPlay() {
  try {
    this.avPlayer = await media.createAVPlayer();
    this.setAVPlayerCallback(this.avPlayer);
  } catch (error) {
    console.error('初始化視頻失敗:', error);
  }
}

async playVideo(url: string) {
  try {
    if(this.avPlayer){
      this.avPlayer.url = url;
      this.avPlayer.play();
    }
  } catch (error) {
    console.error('播放視頻失敗:', error);
  }
}

1. 初始化播放器：通過media.createAVPlayer()創(chuàng)建一個(gè)AVPlayer實(shí)例，并注冊回調(diào)函數(shù)來監(jiān)聽播放狀態(tài)的變化。
2. 播放視頻：通過設(shè)置avPlayer.url屬性為視頻的URL，并調(diào)用play()方法開始播放。這里需要注意的是，視頻URL必須是有效的，否則會導(dǎo)致播放失敗。

（三）狀態(tài)機(jī)回調(diào)與錯(cuò)誤處理

在視頻播放過程中，可能會出現(xiàn)各種狀態(tài)變化和錯(cuò)誤。通過注冊回調(diào)函數(shù)，我們可以更好地管理這些情況：

setAVPlayerCallback(avPlayer: media.AVPlayer) {
  avPlayer.on('startRenderFrame', () => {
    console.info(`AVPlayer start render frame`);
  });
  avPlayer.on('seekDone', (seekDoneTime: number) => {
    console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
  });
  avPlayer.on('error', (err: BusinessError) => {
    console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
    avPlayer.reset();
  });
  avPlayer.on('stateChange', async (state: string, reason: media.StateChangeReason) => {
    switch (state) {
      case 'idle':
        avPlayer.release();
        break;
      case 'initialized':
        const id = mXComponentController.getXComponentSurfaceId();
        avPlayer.surfaceId = id;
        avPlayer.prepare();
        break;
      case 'prepared':
        avPlayer.play();
        break;
      case 'paused':
        console.info('AVPlayer state paused called.');
        break;
      case 'completed':
        avPlayer.stop();
        break;
      case 'stopped':
        avPlayer.reset();
        break;
      case 'released':
        console.info('AVPlayer state released called.');
        break;
      default:
        console.info('AVPlayer state unknown called.');
        break;
    }
  });
}

1. 狀態(tài)回調(diào)：通過監(jiān)聽stateChange事件，我們可以根據(jù)不同的狀態(tài)（如initialized、prepared、playing等）執(zhí)行相應(yīng)的操作。例如，在initialized狀態(tài)時(shí)，設(shè)置播放畫面的surfaceId，并調(diào)用prepare()方法準(zhǔn)備播放。
2. 錯(cuò)誤處理：通過監(jiān)聽error事件，捕獲播放過程中可能出現(xiàn)的錯(cuò)誤，并調(diào)用reset()方法重置播放器狀態(tài)。

三、開發(fā)中的注意事項(xiàng)與優(yōu)化建議

在開發(fā)過程中，我們需要注意以下幾個(gè)關(guān)鍵點(diǎn)，以確保應(yīng)用的穩(wěn)定性和用戶體驗(yàn)：

1. 視頻URL的有效性：在調(diào)用playVideo()方法時(shí)，必須確保傳入的URL是有效的。如果URL無效或網(wǎng)絡(luò)不可用，播放器將無法正常工作。建議在實(shí)際開發(fā)中，對視頻URL進(jìn)行校驗(yàn)，并提供友好的錯(cuò)誤提示。
2. 性能優(yōu)化：為了減少視頻加載時(shí)間，可以考慮在應(yīng)用啟動時(shí)預(yù)先加載視頻資源。此外，合理管理播放器的生命周期，避免在不需要時(shí)占用系統(tǒng)資源。
3. 用戶體驗(yàn)：在頁面布局中，按鈕和文本的排布要簡潔明了，避免過于復(fù)雜的操作。同時(shí)，可以考慮添加進(jìn)度條、音量控制等功能，進(jìn)一步提升用戶體驗(yàn)。

四、總結(jié)

在實(shí)際開發(fā)中，開發(fā)者可以根據(jù)需求進(jìn)一步擴(kuò)展功能，例如添加更多運(yùn)動視頻類別、支持離線下載等。