はじめに

インストール

AI-Assisted セットアップを使用してプラグインをインストールできます。AI ツールに Capgo スキルを追加するには、以下のコマンドを実行してください。

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

次に、以下のプロンプトを使用してください。

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-youtube-player` plugin in my project.

Manual セットアップを使用する場合は、以下のコマンドを実行してください。プラットフォーム固有の指示に従ってください。

bun add @capgo/capacitor-youtube-player
bunx cap sync

インポート

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

メイン WebView で YouTube のリファラブロッキングを修正する

YouTube がプラグイン内で動作する場合でも、同じアプリが YouTube のページ、埋め込み、または API を Capacitor のメイン WebView を通じて読み込むと失敗する場合、有効にします。 patchRefererHeader あなたの Capacitor の設定で "

有効にすると、プラグインは Capacitor の Sync/Update 時に、インターセプトされた YouTube の要求に有効なヘッダーを付与します。 Referer クリップボードにコピー

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

• 、 youtube.com, youtube-nocookie.com既にヘッダーを定義している要求は除きます。 youtu.be 要求
• Only requests that are not already defined with a header are affected. Referer ヘッダーは元の値を保持します。
• refererHeader は省略可能で、 https://www.youtube.com.
• Capacitor がサポートされています。 8.x __CAPGO_KEEP_0__ は、インストール済みの iOS と Android プラットフォームで使用できます。

API オーバービュー

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';

await YoutubePlayer.destroy({} as PlayerIdOptions);

stopVideo

動画の再生を停止し、ロードをキャンセルします。 このメソッドを使用する際は、pauseVideo()を優先することをお勧めします。

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

await YoutubePlayer.stopVideo({} as PlayerIdOptions);

playVideo

現在のクエストまたはロード済みの動画を再生します。 最終的なプレイヤーの状態はPLAYING(1)になります。

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

await YoutubePlayer.playVideo({} as PlayerIdOptions);

pauseVideo

現在の再生中の動画を一時停止します。 最終的なプレイヤーの状態はPAUSED(2)になります。ただし、既にENDED(0)の場合は除きます。

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

await YoutubePlayer.pauseVideo({} as PlayerIdOptions);

seekTo

動画の特定の時間にジャンプします。 プレイヤーが一時停止中の場合は一時停止が維持され、再生中の場合は再生が継続されます。

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

await YoutubePlayer.seekTo({} as SeekToOptions);

loadVideoById

指定されたYouTube IDで動画を読み込み、再生します。

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

await YoutubePlayer.loadVideoById({} as VideoByIdMethodOptions);

cueVideoById

IDで動画をクイューするだけです。thumbnailを読み込み、プレーヤーを準備しますが、再生はplayVideo()を呼び出すまで待ちます。

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

await YoutubePlayer.cueVideoById({} as VideoByIdMethodOptions);

loadVideoByUrl

指定されたURLで動画を読み込み、再生します。

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

await YoutubePlayer.loadVideoByUrl({} as VideoByUrlMethodOptions);

cueVideoByUrl

URLで動画をクイューするだけです。thumbnailを読み込み、プレーヤーを準備しますが、再生はplayVideo()を呼び出すまで待ちます。

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

await YoutubePlayer.cueVideoByUrl({} as VideoByUrlMethodOptions);

cuePlaylist

プレイリストをクエストする プレイリストをロードし、最初のビデオを準備します。

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

await YoutubePlayer.cuePlaylist({} as PlaylistMethodOptions);

loadPlaylist

プレイリストをロードして再生します。

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

await YoutubePlayer.loadPlaylist({} as PlaylistMethodOptions);

nextVideo

プレイリストの次のビデオを再生します。

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

await YoutubePlayer.nextVideo({} as PlayerIdOptions);

previousVideo

プレイリストの前のビデオを再生します。

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

await YoutubePlayer.previousVideo({} as PlayerIdOptions);

playVideoAt

プレイリスト内の特定の動画を指定されたインデックスで再生します。

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

await YoutubePlayer.playVideoAt({} as PlayVideoAtOptions);

mute

プレイヤーアウディオをミュートします。

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

await YoutubePlayer.mute({} as PlayerIdOptions);

unMute

プレイヤーアウディオをミュート解除します。

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

await YoutubePlayer.unMute({} as PlayerIdOptions);

isMuted

プレイヤーが現在ミュートされているかどうかを確認します。

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

await YoutubePlayer.isMuted({} as PlayerIdOptions);

setVolume

プレイヤーの音量を設定します。

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

await YoutubePlayer.setVolume({} as SetVolumeOptions);

getVolume

現在のプレイヤーの音量を取得します。 ミュート状態でも音量を取得します。

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

await YoutubePlayer.getVolume({} as PlayerIdOptions);

setSize

プレイヤーのサイズをピクセル単位で設定します。

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

await YoutubePlayer.setSize({} as SetSizeOptions);

getPlaybackRate

現在の再生速度を取得します。

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

await YoutubePlayer.getPlaybackRate({} as PlayerIdOptions);

setPlaybackRate

再生速度を設定します。

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

await YoutubePlayer.setPlaybackRate({} as SetPlaybackRateOptions);

getAvailablePlaybackRates

現在の動画の再生速度の選択肢を表示します。

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

await YoutubePlayer.getAvailablePlaybackRates({} as PlayerIdOptions);

setLoop

再生リストのループを有効または無効にします。 有効にすると、最後の動画の終了後は再生リストが最初の動画から再生されます。

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

await YoutubePlayer.setLoop({} as SetLoopOptions);

setShuffle

再生リストのシャッフルを有効または無効にします。

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

await YoutubePlayer.setShuffle({} as SetShuffleOptions);

getVideoLoadedFraction

ビデオのバッファリングされた部分の割合を取得します。 より信頼できる getVideoBytesLoaded/getVideoBytesTotal の代替です。

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

await YoutubePlayer.getVideoLoadedFraction({} as PlayerIdOptions);

getPlayerState

プレイヤーの現在の状態を取得します。

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

await YoutubePlayer.getPlayerState({} as PlayerIdOptions);

getAllPlayersEventsState

すべてのアクティブなプレイヤーのイベント状態を取得します。 複数のプレイヤー インスタンスを追跡するのに役立ちます。

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

await YoutubePlayer.getAllPlayersEventsState();

getCurrentTime

現在の再生位置（秒）を取得します。

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

await YoutubePlayer.getCurrentTime({} as PlayerIdOptions);

toggleFullScreen

フルスクリーンモードをオンまたはオフにします。

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

await YoutubePlayer.toggleFullScreen({} as ToggleFullScreenOptions);

getPlaybackQuality

現在の再生品質を取得します。

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

await YoutubePlayer.getPlaybackQuality({} as PlayerIdOptions);

setPlaybackQuality

推奨される再生品質を設定します。 ネットワーク条件によって実際の品質が異なる場合があります。

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

await YoutubePlayer.setPlaybackQuality({} as SetPlaybackQualityOptions);

getAvailableQualityLevels

現在の動画の利用可能な品質レベルの一覧を取得します。

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

await YoutubePlayer.getAvailableQualityLevels({} as PlayerIdOptions);

getDuration

現在の動画の長さ（秒）を取得します。

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

await YoutubePlayer.getDuration({} as PlayerIdOptions);

getVideoUrl

現在の動画のYouTube.com URLを取得します。

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

await YoutubePlayer.getVideoUrl({} as PlayerIdOptions);

getVideoEmbedCode

Get the embed code for the current video. Returns HTML iframe embed code.

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

await YoutubePlayer.getVideoEmbedCode({} as PlayerIdOptions);

getPlaylist

現在のプレイリスト内の動画IDの配列を取得します。

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

await YoutubePlayer.getPlaylist({} as PlayerIdOptions);

getPlaylistIndex

プレイリストで現在再生中の動画のインデックスを取得します。

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

await YoutubePlayer.getPlaylistIndex({} as PlayerIdOptions);

getIframe

プレイヤーのiframe DOM要素を取得します。 Webプラットフォームのみ。

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

await YoutubePlayer.getIframe({} as PlayerIdOptions);

addEventListener

イベントリスナーをプレイヤーに追加します。 Webプラットフォームのみ。

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

YoutubePlayer.addEventListener({
  playerId: 'my-player',
  eventName: 'onStateChange',
  listener: (event) => {
  console.log('Player state:', event.data);
  },
});

removeEventListener

イベントリスナーをプレイヤーから削除します。 Webプラットフォームのみ。

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

await YoutubePlayer.removeEventListener({} as PlayerEventListenerOptions<TEvent>);

種類の参照

PlayerIdOptions

export interface PlayerIdOptions {
  playerId: string;
}

SeekToOptions

export interface SeekToOptions extends PlayerIdOptions {
  playerId: string;
  seconds: number;
  allowSeekAhead: boolean;
}

VideoByIdMethodOptions

export interface VideoByIdMethodOptions extends PlayerIdOptions {
  playerId: string;
  options: IVideoOptionsById;
}

VideoByUrlMethodOptions

export interface VideoByUrlMethodOptions extends PlayerIdOptions {
  playerId: string;
  options: IVideoOptionsByUrl;
}

PlaylistMethodOptions

export interface PlaylistMethodOptions extends PlayerIdOptions {
  playerId: string;
  playlistOptions: IPlaylistOptions;
}

PlayVideoAtOptions

export interface PlayVideoAtOptions extends PlayerIdOptions {
  playerId: string;
  index: number;
}

SetVolumeOptions

export interface SetVolumeOptions extends PlayerIdOptions {
  playerId: string;
  volume: number;
}

SetSizeOptions

export interface SetSizeOptions extends PlayerIdOptions {
  playerId: string;
  width: number;
  height: number;
}

SetPlaybackRateOptions

export interface SetPlaybackRateOptions extends PlayerIdOptions {
  playerId: string;
  suggestedRate: number;
}

SetLoopOptions

export interface SetLoopOptions extends PlayerIdOptions {
  playerId: string;
  loopPlaylists: boolean;
}

SetShuffleOptions

export interface SetShuffleOptions extends PlayerIdOptions {
  playerId: string;
  shufflePlaylist: boolean;
}

ToggleFullScreenOptions

export interface ToggleFullScreenOptions extends PlayerIdOptions {
  playerId: string;
  isFullScreen: boolean | null | undefined;
}

真実の源

このページはプラグインの src/definitions.tsパブリックAPIがアップストリームで変更されたときに再度Syncを実行してください。

Getting Startedから続けてください

を使用してダッシュボードと__CAPGO_KEEP_0__の作業を計画している場合、を接続してください。 を使用して@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-youtube-player to plan dashboard and API operations, connect it with Using @capgo/capacitor-youtube-player Capacitor のネイティブ機能である @capgo/capacitor-youtube-player の使用について API オーバービュー API オーバービューの実装詳細について 導入 導入の実装詳細について API キー API キーの実装詳細について、 デバイス デバイスの実装詳細について