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

YouTube Player

YouTube動画をフルプレイヤー API制御とイベントハンドリングで埋め込む

ガイド

YouTube Playerのチュートリアル

デバイスでテスト

Capgoアプリをダウンロードして、QRコードをcodeでスキャンしてください。

YouTube プレイヤー プラグイン プレビュー QR code

使用中:@capgo/capacitor-youtube-player

Capacitor用のYouTube プレイヤー プラグイン インターフェイスです。アプリ内で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.comyoutu.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

動画の再生を停止し、ロードをキャンセルします。使用する場合は、まれに使用されるため、pauseVideo()を使用することが推奨されます。

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

await YoutubePlayer.destroy({} as PlayerIdOptions);

stopVideo

リクエスト

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

await YoutubePlayer.stopVideo({} as PlayerIdOptions);

playVideo

Play the currently cued or loaded video. Final player state will be PLAYING (1).

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

await YoutubePlayer.playVideo({} as PlayerIdOptions);

Full Reference

capgo: capacitor-youtube-player

If you are using Using @capgo/capacitor-youtube-player to plan native media and interface behavior, connect it with @capgo/capacitor-youtube-player for the implementation detail in @capgo/capacitor-youtube-player, Getting Started for the implementation detail in Getting Started, Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, and Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player.