はじめる

1. パッケージをインストールします

   npm

   npm i @capgo/capacitor-video-player

   pnpm

   pnpm add @capgo/capacitor-video-player

   yarn

   yarn add @capgo/capacitor-video-player

   bun

   bun add @capgo/capacitor-video-player

2. ネイティブ プロジェクトと同期

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

基本的な使い方

import { CapacitorVideoPlayer } from '@capgo/capacitor-video-player';

// Initialize a video player
const playVideo = async () => {
  const result = await CapacitorVideoPlayer.initPlayer({
    mode: 'fullscreen',
    url: 'https://example.com/video.mp4',
    playerId: 'myPlayer',
    componentTag: 'div'
  });

  console.log('Player initialized:', result);
};

// Play the video
await CapacitorVideoPlayer.play({ playerId: 'myPlayer' });

// Pause the video
await CapacitorVideoPlayer.pause({ playerId: 'myPlayer' });

// Get current time
const { value } = await CapacitorVideoPlayer.getCurrentTime({ playerId: 'myPlayer' });
console.log('Current time:', value);

// Seek to position
await CapacitorVideoPlayer.setCurrentTime({
  playerId: 'myPlayer',
  seektime: 30 // seconds
});

// Set volume (0-1)
await CapacitorVideoPlayer.setVolume({
  playerId: 'myPlayer',
  volume: 0.5
});

API リファレンス

initPlayer(オプション)

ビデオプレーヤーのインスタンスを初期化します。

await CapacitorVideoPlayer.initPlayer({
  mode: 'fullscreen', // or 'embedded'
  url: 'https://example.com/video.mp4',
  playerId: 'player1',
  subtitle: 'https://example.com/subtitles.vtt',
  language: 'en',
  rate: 1.0,
  exitOnEnd: true,
  loopOnEnd: false,
  pipEnabled: true,
  showControls: true
});

プレイ(オプション)

ビデオを再生します。

await CapacitorVideoPlayer.play({ playerId: 'player1' });

一時停止(オプション)

ビデオを一時停止します。

await CapacitorVideoPlayer.pause({ playerId: 'player1' });

getDuration(オプション)

動画の長さを秒単位で取得します。

const { value } = await CapacitorVideoPlayer.getDuration({ playerId: 'player1' });
console.log('Duration:', value, 'seconds');

getCurrentTime(オプション)

現在の再生位置を秒単位で取得します。

const { value } = await CapacitorVideoPlayer.getCurrentTime({ playerId: 'player1' });

setCurrentTime(オプション)

特定の時刻までシークします。

await CapacitorVideoPlayer.setCurrentTime({
  playerId: 'player1',
  seektime: 60 // seconds
});

setVolume(オプション)

音量を設定します (0.0 ～ 1.0)。

await CapacitorVideoPlayer.setVolume({
  playerId: 'player1',
  volume: 0.8
});

getVolume(オプション)

現在の音量を取得します。

const { value } = await CapacitorVideoPlayer.getVolume({ playerId: 'player1' });

setMuted(オプション)

ビデオをミュートまたはミュート解除します。

await CapacitorVideoPlayer.setMuted({
  playerId: 'player1',
  muted: true
});

setRate(オプション)

再生速度を設定します。

await CapacitorVideoPlayer.setRate({
  playerId: 'player1',
  rate: 1.5 // 1.5x speed
});

stopAllPlayers()

すべてのアクティブなプレイヤーを停止します。

await CapacitorVideoPlayer.stopAllPlayers();

exitPlayer()

ビデオプレーヤーを終了します。

await CapacitorVideoPlayer.exitPlayer();

完全な例

import { CapacitorVideoPlayer } from '@capgo/capacitor-video-player';

export class VideoPlayerService {
  private playerId = 'mainPlayer';

  async initializePlayer(videoUrl: string, subtitleUrl?: string) {
    try {
      const result = await CapacitorVideoPlayer.initPlayer({
        mode: 'fullscreen',
        url: videoUrl,
        playerId: this.playerId,
        subtitle: subtitleUrl,
        language: 'en',
        rate: 1.0,
        exitOnEnd: true,
        loopOnEnd: false,
        pipEnabled: true,
        bkmodeEnabled: true,
        showControls: true,
        displayMode: 'all'
      });

      console.log('Player initialized:', result);
      return result;
    } catch (error) {
      console.error('Failed to initialize player:', error);
      throw error;
    }
  }

  async togglePlayPause() {
    const { value: isPlaying } = await CapacitorVideoPlayer.isPlaying({
      playerId: this.playerId
    });

    if (isPlaying) {
      await CapacitorVideoPlayer.pause({ playerId: this.playerId });
    } else {
      await CapacitorVideoPlayer.play({ playerId: this.playerId });
    }
  }

  async seekForward(seconds: number = 10) {
    const { value: currentTime } = await CapacitorVideoPlayer.getCurrentTime({
      playerId: this.playerId
    });

    await CapacitorVideoPlayer.setCurrentTime({
      playerId: this.playerId,
      seektime: currentTime + seconds
    });
  }

  async seekBackward(seconds: number = 10) {
    const { value: currentTime } = await CapacitorVideoPlayer.getCurrentTime({
      playerId: this.playerId
    });

    await CapacitorVideoPlayer.setCurrentTime({
      playerId: this.playerId,
      seektime: Math.max(0, currentTime - seconds)
    });
  }

  async setPlaybackSpeed(speed: number) {
    await CapacitorVideoPlayer.setRate({
      playerId: this.playerId,
      rate: speed
    });
  }

  async getProgress() {
    const { value: currentTime } = await CapacitorVideoPlayer.getCurrentTime({
      playerId: this.playerId
    });
    const { value: duration } = await CapacitorVideoPlayer.getDuration({
      playerId: this.playerId
    });

    return {
      currentTime,
      duration,
      percentage: (currentTime / duration) * 100
    };
  }

  async cleanup() {
    await CapacitorVideoPlayer.stopAllPlayers();
  }
}

プラットフォームに関する注意事項

iOS

• iOS 10.0+が必要です
• ネイティブ AVPlayer を使用
• ピクチャインピクチャをサポート
• バックグラウンド再生をサポート

Android

• Android 5.0 (API 21)+ が必要です
• ExoPlayerを使用します
• Chromecastをサポート
• カスタムアクセントカラーが利用可能

ウェブ

• HTML5ビデオプレーヤーを使用します
• 埋め込みモードのみ
• ネイティブ機能が制限されている

ベストプラクティス

1. プレイヤーをクリーンアップ: 完了したら必ずプレイヤーを停止します
2. エラーの処理: プレイヤーの呼び出しを try-catch でラップする
3. 一意のプレーヤー ID: 複数のプレーヤーに一意の ID を使用します
4. 再生ステータスの確認: 操作前に状態を確認します。
5. リソース管理: プレーヤーを解放してメモリを解放します