ガイド
Capacitor で YouTube Player を使う方法
@capgo/capacitor-youtube-playerの使い方
Capacitor 用の YouTube Player プラグイン。アプリ内で YouTube 動画の再生を制御するメソッドを提供します。
インストール
bun add @capgo/capacitor-youtube-player
bunx cap sync
このプラグインで利用可能な機能
initialize- 新しいYouTubeプレイヤーインスタンスを初期化します。destroy- プレイヤーインスタンスを破棄し、リソースを解放します。stopVideo- 動画の再生を停止し、読み込みをキャンセルします。多用は避けてください。通常は pauseVideo() が推奨されます。playVideo- 現在キューに入っている、または読み込み済みの動画を再生します。最終的なプレイヤー状態は PLAYING (1) になります。
メインWebViewのリファラ修正
有効にする patchRefererHeader プラグイン内ではYouTubeコンテンツが動作するものの、Capacitor のメインWebViewでは、YouTubeがブラウザのような Referer header.
{
"plugins": {
"YoutubePlayer": {
"patchRefererHeader": true,
"refererHeader": "https://www.youtube.com"
}
}
}
このパッチは、以下のリクエストにのみ適用されます： youtube.com, youtube-nocookie.comや youtu.be 既存のリクエストレベルの Referer ヘッダーは保持されます。 refererHeader デフォルトでは https://www.youtube.com ヘッダーが省略されている場合。
使用例
initialize
新しいYouTubeプレイヤーのインスタンスを初期化します。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.initialize({
playerId: 'my-player',
videoId: 'dQw4w9WgXcQ',
playerSize: { width: 640, height: 360 },
privacyEnhanced: true
});
destroy
プレイヤーのインスタンスを破棄し、リソースを解放します。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
const result = await YoutubePlayer.destroy({ playerId: 'player-id-123' });
console.log(result);
stopVideo
動画の再生を停止し、読み込みをキャンセルします。頻繁な使用は避け、通常は pauseVideo() を使用してください。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
const result = await YoutubePlayer.stopVideo({ playerId: 'player-id-123' });
console.log(result);
playVideo
キューまたはロード済みの動画を再生します。最終的なプレイヤーの状態は PLAYING (1) になります。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
const result = await YoutubePlayer.playVideo({ playerId: 'player-id-123' });
console.log(result);
リファレンス全文
- GitHub: https://github.com/Cap-go/capacitor-youtube-player/
- ドキュメント: /docs/plugins/youtube-player/
@capgo/capacitor-youtube-player の使用方法へ進む
使用している場合 @capgo/capacitor-youtube-playerの使い方 ネイティブメディアとインターフェースの挙動を計画するには、次と連携させてください @capgo/capacitor-youtube-player @capgo/capacitor-youtube-player の実装詳細については、 スタートガイド スタートガイドの実装詳細については、 @capgo/capacitor-live-activities の使用 @capgo/capacitor-live-activities の使用におけるネイティブ機能については、 @capgo/capacitor-live-activities @capgo/capacitor-live-activities の実装の詳細については、 @capgo/capacitor-video-playerの使用方法 「@capgo/capacitor-video-player. の使い方」のネイティブ機能については