跳过内容

入门

GitHub

You can use our AI-Assisted Setup to install the plugin. Add the Capgo skills to your AI tool using the following command:

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

Then use the following prompt:

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

如果您更喜欢手动设置,请运行以下命令安装插件,并按照以下平台特定的说明进行操作:

终端窗口
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);

setCurrentTime

setCurrentTime

从给定的playerId设置当前时间以便当前视频跳转

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

getVolume

getVolume

从给定的playerId获取当前视频的音量

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

setVolume

setVolume

从给定的playerId设置当前视频的音量

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

getMuted

getMuted

从给定 playerId 中获取当前视频的静音状态

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

setMuted

静音设置

将当前视频的静音状态设置为从给定 playerId 中获取

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

复制到剪贴板

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

获取当前视频的速率从给定 playerId 中

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

stopAllPlayers

停止所有播放器

__CAPGO_KEEP_0__

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

showController

显示控制器

显示控制器

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

isControllerIsFullyVisible

控制器是否完全可见

控制器是否完全可见

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

exitPlayer

退出玩家

退出玩家

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

类型参考

类型参考

capVideoPlayerOptions

capVideoPlayerOptions
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;
}

capVideoPlayerResult

capVideoPlayerResult
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;
}

capVideoPlayerIdOptions

capVideoPlayerIdOptions
export interface capVideoPlayerIdOptions {
/**
* Id of DIV Element parent of the player
*/
playerId?: string;
}

capVideoTimeOptions

capVideoTimeOptions
export interface capVideoTimeOptions {
/**
* Id of DIV Element parent of the player
*/
playerId?: string;
/**
* Video time value you want to seek to
*/
seektime?: number;
}

capVideoVolumeOptions

capVideoVolumeOptions
export interface capVideoVolumeOptions {
/**
* Id of DIV Element parent of the player
*/
playerId?: string;
/**
* Volume value between [0 - 1]
*/
volume?: number;
}

capVideoMutedOptions

capVideoMutedOptions
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;
}

SubTitleOptions

标题:字幕选项
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;
}

FairPlayDrmOptions

标题:FairPlay DRM选项
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;
}

PlayreadyDrmOptions

标题:PlayReady DRM选项
export interface PlayreadyDrmOptions {
/**
* The URL to fetch the PlayReady license
*/
certificateUrl?: string;
}

WidevineDrmOptions

标题:Widevine DRM选项
export interface WidevineDrmOptions {
/**
* The URL to fetch the Widevine license
*/
certificateUrl?: string;
}

此页面由插件生成 src/definitions.ts. 当公共 API 上游更改时,请重新运行同步。

从 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-live-activities 的实现细节 @capgo/capacitor-video-player 为 @capgo/capacitor-video-player 的实现细节, 和 使用 @capgo/capacitor-native-navigation 为使用 @capgo/capacitor-native-navigation 的原生功能