メインコンテンツにジャンプ
プラグインに戻る
@capgo/capacitor-youtube-player
チュートリアル
@capgo/capacitor-youtube-player

YouTube Player

YouTube動画をフルプレイヤーAPIで埋め込み、イベントハンドリングも可能

ガイド

YouTube プレイヤーに関するチュートリアル

デバイスでテスト

Download the Capgo app, then scan the QR code.

YouTube Player プラグインのプレビューQRcode

@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 ヘッダーを期待しています。

{
  "plugins": {
    "YoutubePlayer": {
      "patchRefererHeader": true,
      "refererHeader": "https://www.youtube.com"
    }
  }
}

このパッチは youtube.com, youtube-nocookie.com、および youtu.be リクエストにのみ適用されます。既存のリクエストレベルの Referer ヘッダーは保持され、 refererHeader がデフォルトになります。省略された場合。 https://www.youtube.com 例えば

新しい YouTube プレーヤー インスタンスを初期化します。

initialize

例えば

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.initialize({
  playerId: 'my-player',
  videoId: 'dQw4w9WgXcQ',
  playerSize: { width: 640, height: 360 },
  privacyEnhanced: true
});

destroy

__CAPGO_KEEP_0__:

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.destroy({} as PlayerIdOptions);

stopVideo

__CAPGO_KEEP_1__

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.stopVideo({} as PlayerIdOptions);

playVideo

__CAPGO_KEEP_0__

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.playVideo({} as PlayerIdOptions);

__CAPGO_KEEP_1__

Keep going from Using @capgo/capacitor-youtube-player

__CAPGO_KEEP_0__ Using @capgo/capacitor-youtube-player __CAPGO_KEEP_0__/__CAPGO_KEEP_1__ capgo/capacitor-youtube-player Capacitor YouTube プレイヤー用の実装詳細については、@capgo/capacitor-youtube-player を参照してください。 Getting Started Capacitor YouTube プレイヤー用の実装詳細については、Getting Started を参照してください。 Capacitor ライブ アクティビティを使用するには、@capgo/capacitor-live-activities を参照してください。 for the native capability in Using @capgo/capacitor-live-activities, Capacitor ライブ アクティビティを使用するには、@capgo/capacitor-live-activities、 Capacitor ビデオ プレイヤーを使用するには、@capgo/capacitor-video-player を参照してください。 Capacitor YouTube プレイヤー用の実装詳細については、@capgo/capacitor-live-activities に記載されています。 for the native capability in Using @capgo/capacitor-video-player.