Skip to content

Getting Started

GitHub

AIアシストのセットアップを使用してプラグインをインストールできます。次のコマンドを使用して、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-video-player` plugin in my project.

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

ターミナル画面
bun add @capgo/capacitor-video-player
bunx cap sync
import { VideoPlayer } from '@capgo/capacitor-video-player';

ビデオプレイヤーを初期化する

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.initPlayer({} as capVideoPlayerOptions);

playerIdがプレイ中かどうかを返す

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.isPlaying({} as capVideoPlayerIdOptions);

playerIdから現在のビデオを再生する

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.play({} as capVideoPlayerIdOptions);

指定されたplayerIdから現在の動画を停止します。

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.pause({} as capVideoPlayerIdOptions);

指定されたplayerIdから現在の動画の長さを取得します。

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getDuration({} as capVideoPlayerIdOptions);

指定されたplayerIdから現在の動画の現在時刻を取得します。

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getCurrentTime({} as capVideoPlayerIdOptions);

指定されたplayerIdから現在の動画の現在時刻を設定して、現在の動画を指定された位置まで進めます。

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setCurrentTime({} as capVideoTimeOptions);

指定された playerId の現在の動画の音量を取得します。

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getVolume({} as capVideoPlayerIdOptions);

指定された playerId の現在の動画の音量を設定します。

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setVolume({} as capVideoVolumeOptions);

指定された playerId の現在の動画のミュート状態を取得します。

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getMuted({} as capVideoPlayerIdOptions);

指定された playerId の現在の動画のミュート状態を設定します。

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setMuted({} as capVideoMutedOptions);

__CAPGO_KEEP_0__の動画の再生速度を指定されたplayerIdから設定します

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setRate({} as capVideoRateOptions);

__CAPGO_KEEP_0__の動画の再生速度を指定されたplayerIdから取得します

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getRate({} as capVideoPlayerIdOptions);

stopAllPlayers

__CAPGO_KEEP_2__

すべてのプレイヤーを停止

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.stopAllPlayers();

showController

__CAPGO_KEEP_2__

__CAPGO_KEEP_2__を表示

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.showController();

isControllerIsFullyVisible

__CAPGO_KEEP_2__

isControllerIsFullyVisible

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.isControllerIsFullyVisible();

プレイヤーを退出

import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.exitPlayer();
export interface capVideoPlayerOptions {
/**
* Player mode
* - "fullscreen"
* - "embedded" (Web only)
*/
mode?: string;
/**
* The url of the video to play
*/
url?: string;
/**
* The url of subtitle associated with the video
*/
subtitle?: string;
/**
* The language of subtitle
* see https://github.com/libyal/libfwnt/wiki/Language-Code-identifiers
*/
language?: string;
/**
* SubTitle Options
*/
subtitleOptions?: SubTitleOptions;
/**
* Id of DIV Element parent of the player
*/
playerId?: string;
/**
* Initial playing rate
*/
rate?: number;
/**
* Exit on VideoEnd (iOS, Android)
* default: true
*/
exitOnEnd?: boolean;
/**
* Loop on VideoEnd when exitOnEnd false (iOS, Android)
* default: false
*/
loopOnEnd?: boolean;
/**
* Picture in Picture Enable (iOS, Android)
* default: true
*/
pipEnabled?: boolean;
/**
* Background Mode Enable (iOS, Android)
* default: true
*/
bkmodeEnabled?: boolean;
/**
* Show Controls Enable (iOS, Android)
* default: true
*/
showControls?: boolean;
/**
* Display Mode ["all", "portrait", "landscape"] (iOS, Android)
* default: "all"
*/
displayMode?: string;
/**
* Component Tag or DOM Element Tag (React app)
*/
componentTag?: string;
/**
* Player Width (mode "embedded" only)
*/
width?: number;
/**
* Player height (mode "embedded" only)
*/
height?: number;
/**
* Headers for the request (iOS, Android)
* by Manuel García Marín (https://github.com/PhantomPainX)
*/
headers?: {
[key: string]: string;
};
/**
* Title shown in the player (Android)
* by Manuel García Marín (https://github.com/PhantomPainX)
*/
title?: string;
/**
* Subtitle shown below the title in the player (Android)
* by Manuel García Marín (https://github.com/PhantomPainX)
*/
smallTitle?: string;
/**
* ExoPlayer Progress Bar and Spinner color (Android)
* by Manuel García Marín (https://github.com/PhantomPainX)
* Must be a valid hex color code
* default: #FFFFFF
*/
accentColor?: string;
/**
* Chromecast enable/disable (Android)
* by Manuel García Marín (https://github.com/PhantomPainX)
* default: true
*/
chromecast?: boolean;
/**
* Artwork url to be shown in Chromecast player
* by Manuel García Marín (https://github.com/PhantomPainX)
* default: ""
*/
artwork?: string;
/**
* DRM configuration for protected content (iOS: FairPlay, Android: Widevine)
*/
drm?: DrmOptions;
}
export interface capVideoPlayerResult {
/**
* result set to true when successful else false
*/
result?: boolean;
/**
* method name
*/
method?: string;
/**
* value returned
*/
value?: any;
/**
* message string
*/
message?: string;
}
export interface capVideoPlayerIdOptions {
/**
* Id of DIV Element parent of the player
*/
playerId?: string;
}
export interface capVideoTimeOptions {
/**
* Id of DIV Element parent of the player
*/
playerId?: string;
/**
* Video time value you want to seek to
*/
seektime?: number;
}
export interface capVideoVolumeOptions {
/**
* Id of DIV Element parent of the player
*/
playerId?: string;
/**
* Volume value between [0 - 1]
*/
volume?: number;
}
export interface capVideoMutedOptions {
/**
* Id of DIV Element parent of the player
*/
playerId?: string;
/**
* Muted value true or false
*/
muted?: boolean;
}
export interface capVideoRateOptions {
/**
* Id of DIV Element parent of the player
*/
playerId?: string;
/**
* Rate value
*/
rate?: number;
}
export interface SubTitleOptions {
/**
* Foreground Color in RGBA (default rgba(255,255,255,1)
*/
foregroundColor?: string;
/**
* Background Color in RGBA (default rgba(0,0,0,1)
*/
backgroundColor?: string;
/**
* Font Size in pixels (default 16)
*/
fontSize?: number;
/**
* Get the native Capacitor plugin version
*
* @returns {Promise<{ id: string }>} an Promise with version for this device
* @throws An error if the something went wrong
*/
getPluginVersion(): Promise<{ version: string }>;
}
export interface DrmOptions {
/**
* FairPlay DRM configuration (iOS)
*/
fairplay?: FairPlayDrmOptions;
/**
* PlayReady DRM configuration
*/
playready?: PlayreadyDrmOptions;
/**
* Widevine DRM configuration (Android)
*/
widevine?: WidevineDrmOptions;
}
export interface FairPlayDrmOptions {
/**
* The URL to fetch the FairPlay certificate
*/
certificateUrl?: string;
/**
* The URL to send the SPC and receive the CKC license (FairPlay license server URL)
*/
contentKeySpcUrl?: string;
}
export interface PlayreadyDrmOptions {
/**
* The URL to fetch the PlayReady license
*/
certificateUrl?: string;
}
export interface WidevineDrmOptions {
/**
* The URL to fetch the Widevine license
*/
certificateUrl?: string;
}

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

Getting Started から続けてください

「Getting Started」から続けてください

あなたは「を使用しています Getting Started ネイティブメディアとインターフェイスの動作を計画するには、を接続してください ネイティブ機能として「@capgo/capacitor-video-player」を使用する ネイティブ機能として「@capgo/capacitor-video-player」を使用する 「@capgo/capacitor-live-activities」を使用する ネイティブ機能として「@capgo/capacitor-live-activities」を使用する 「@capgo/capacitor-live-activities」の実装詳細 「@capgo/capacitor-video-player」の実装詳細 「@capgo/capacitor-video-player」を使用する capgo=capacitor Using @capgo/capacitor-native-ナビゲーション for the native capability in Using @capgo/capacitor-native-ナビゲーション。