📘
鴻蒙運動開発実践：専用の運動ビデオプレーヤーの作成

2025/06/30に公開
 鴻蒙核心技术##運動開発##Media Kit（メディアサービス）#現代のデジタル時代において、運動フィットネスは多くの人々の生活の一部となっています。本日はアプリにビデオプレーヤーを追加し、ユーザーが運動前にウォームアップし、運動後にストレッチングを行うのを支援します。この記事では、コードの核心部分から始め、開発プロセスにおける重要な技術と実装の詳細についてステップバイステップで理解するお手伝いをします。
上記の画像のリンクは、ネットワークの問題のために解析に失敗しました。この問題は、リンク自体の合法性やネットワーク状況に関連する可能性があります。ウェブページのリンクが正しいことを確認し、適宜再度お試しください。

 一、プロジェクトの背景とニーズ分析どんなアプリを開発するにも、ニーズを明確にすることは非常に重要です。運動ビデオプレーヤーの場合、以下のコア機能を考える必要があります：

ビデオ再生：ウォームアップやストレッチングなど、運動に関連するビデオを再生をサポートします。

ユーザーインターフェース：再生、一時停止、再開などの簡単なボタン操作を提供します。

 二、コードの核心部分の整理と解析次に、コードの核心部分を通じて、運動ビデオプレーヤーを実現するための重要な手順をステップバイステップで解析します。

 （一）ページのレイアウトとナビゲーション鴻蒙開発では、ページのレイアウトはユーザー体験の基本です。LibNavとLibPageを使用して、ページのナビゲーションとコンテンツのレイアウトを構築しました。以下がコードの核心部分です：
@Component
export struct SportHelperPage {
  @Builder
  pageNavBuilder(){
    LibNav({
      pageTitle: "運動助手"
    }).width("100%")
  }

  @Builder
  pageContentBuilder(){
    Column() {
      Text('運動助手')
        .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('再生を再開する')
        .onClick(() => {
          this.avPlayer?.play()
        })
      XComponent({ type: XComponentType.SURFACE, controller: mXComponentController })
        .width('100%')
        .height(300)
    }
    .padding(20)
    .backgroundColor(Color.White)
  }
}

ページのナビゲーション：LibNavを使用して、ページのタイトルを「運動助手」とし、その幅を100％に設定して、ナビゲーションバーが画面の上部全体をカバーできるようにします。

ページのコンテンツ：Columnレイアウトを使用して、テキスト、ボタン、ビデオ再生コンポーネント（XComponent）を順に配置します。各ボタンにはクリックイベントがバインドされており、ビデオの再生や再生状態の制御をトリガーします。

 （二）ビデオプレーヤーの初期化と制御ビデオ再生はアプリのコア機能です。鴻蒙のmedia.AVPlayerを使用して実現しました。以下が初期化と再生制御のコードです：
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);
  }
}

プレーヤーの初期化：media.createAVPlayer()を使用してAVPlayerインスタンスを作成し、コールバック関数を登録して再生状態の変更を監視します。

ビデオの再生：avPlayer.urlプロパティにビデオのURLを設定し、play()メソッドを呼び出して再生を開始します。ここで注意する点は、ビデオURLが有効でなければならないことです。そうでない場合は、再生に失敗する可能性があります。

 （三）ステートマシンコールバックとエラー処理ビデオ再生プロセス中では、さまざまな状態の変化やエラーが発生する可能性があります。コールバック関数を登録することで、これらの状況をより効果的に管理できます。
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;
    }
  });
}

ステートコールバック：stateChangeイベントを監視することで、異なる状態（initialized、prepared、playingなど）に応じて適切な操作を実行できます。たとえば、initialized状態では、再生画面のsurfaceIdを設定し、prepare()メソッドを呼び出して再生を準備します。

エラー処理：errorイベントを監視することで、再生プロセス中に発生する可能性のあるエラーをキャッチし、reset()メソッドを呼び出してプレーヤーの状態をリセットします。

 三、開発上の注意点と最適化の提案開発プロセスでは、以下の重要な点に注意する必要があります。これにより、アプリの安定性和ユーザー体験が保証されます。

ビデオURLの有効性：playVideo()メソッドを呼び出す際には、渡されたURLが有効であることを確認する必要があります。URLが無効であるか、ネットワークが使用できない場合、プレーヤーは正常に動作しません。実際の開発では、ビデオURLを検証し、フレンドリーなエラーメッセージを提供することをお勧めします。

パフォーマンスの最適化：ビデオのロード時間を短縮するために、アプリの起動時にビデオリソースを事前にロードすることを検討することができます。また、プレーヤーのライフサイクルを適切に管理して、不要なシステムリソースの使用を避けることも重要です。

ユーザー体験：ページのレイアウトでは、ボタンやテキストの配置を簡潔明瞭にし、操作が複雑になることを避けてください。また、プログレスバー、音量コントロールなどの機能を追加して、ユーザー体験をさらに向上させることが考えられます。

 四、まとめ実際の開発では、開発者は必要に応じて機能をさらに拡張することができます。たとえば、より多くの運動ビデオカテゴリを追加したり、オフラインダウンロードをサポートしたりすることもできます。
鴻蒙核心技术##運動開発##Media Kit（メディアサービス）#

一、プロジェクトの背景とニーズ分析

二、コードの核心部分の整理と解析

（一）ページのレイアウトとナビゲーション

（二）ビデオプレーヤーの初期化と制御

（三）ステートマシンコールバックとエラー処理

三、開発上の注意点と最適化の提案

四、まとめ

Discussion
