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

YouTube プラグイン

Embed YouTube videos with full player API control and event handling

ガイド

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

Capacitorで@capgo/capacitor-youtube-playerを使用

YouTube Player Plugin interface for Capacitor. Provides methods to control YouTube video playback in your app.

インストール

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

このプラグインが公開するもの

  • initialize - YouTube プレーヤー インスタンスを新規に作成します。
  • destroy - プレーヤー インスタンスを破棄し、リソースを解放します。
  • stopVideo - ビデオ再生を停止し、ロードをキャンセルします。使用する場合はまれに - pauseVideo() が推奨されます。
  • playVideo - 予めクエューまたはロードされたビデオを再生します。最終的なプレーヤー状態はPLAYING (1) になります。

メイン ウェブ ビュー リファラー パッチ

有効 patchRefererHeader YouTube のコンテンツがプラグインで動作するが、Capacitor のメイン ウェブ ビューから失敗する場合に使用します。YouTube はブラウザのようなヘッダーを期待します。 Referer このパッチは

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

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

フルリファレンス

使用中の@capgo/capacitor-youtube-playerから続けてください

Capgoを使用している場合 Using @capgo/capacitor-youtube-player ネイティブメディアとインターフェイスの動作を計画するには、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-youtube-playerと接続してください Capacitorの@capgo/capacitor-youtube-playerの実装詳細については for the implementation detail in @capgo/capacitor-youtube-player, Capgoの@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activitiesを使用してネイティブ機能を実現 CapgoのUsing @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activitiesのネイティブ機能を実現 @capgo/capacitor-live-activities Capacitorの@capgo/capacitor-live-activities Capacitorの@capgo/capacitor-live-activities @capgo/capacitor-live-activitiesの実装詳細について @capgo/capacitor-video-playerを使用 @capgo/capacitor-video-playerのネイティブ機能を使用