Getting Started
Salin prompt pengaturan dengan langkah instalasi dan panduan markdown lengkap untuk plugin ini.
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-video-player`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/video-player/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
Instal
Judul bagian “Instal”Anda dapat menggunakan Pengaturan AI Bantu untuk menginstal plugin. Tambahkan Capgo kemampuan ke alat AI Anda menggunakan perintah berikut:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsKemudian gunakan prompt berikut:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-video-player` plugin in my project.Jika Anda lebih suka Setup Manual, instal plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah ini:
bun add @capgo/capacitor-video-playerbunx cap syncImpor
Judul bagian “Impor”import { VideoPlayer } from '@capgo/capacitor-video-player';Ringkasan API
Judul bagian “Ringkasan API”initPlayer
Judul bagian “initPlayer”Inisialisasi pemutar video
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.initPlayer({} as capVideoPlayerOptions);isPlaying
Bagian berjudul “isPlaying”Kembali jika id pemain yang diberikan sedang bermain
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.isPlaying({} as capVideoPlayerIdOptions);Mainkan video saat ini dari id pemain yang diberikan
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.play({} as capVideoPlayerIdOptions);Tangguhkan video saat ini dari id pemain yang diberikan
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.pause({} as capVideoPlayerIdOptions);getDuration
Bagian berjudul “getDuration”Dapatkan durasi video saat ini dari id pemain yang diberikan
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getDuration({} as capVideoPlayerIdOptions);getCurrentTime
Judul bagian “getCurrentTime”Dapatkan waktu saat ini dari video yang sedang diputar dari playerId yang diberikan
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getCurrentTime({} as capVideoPlayerIdOptions);setCurrentTime
Judul bagian “setCurrentTime”Atur waktu saat ini untuk mencari video ke dari playerId yang diberikan
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setCurrentTime({} as capVideoTimeOptions);getVolume
Judul bagian “getVolume”Dapatkan volume video yang sedang diputar dari playerId yang diberikan
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getVolume({} as capVideoPlayerIdOptions);setVolume
Judul bagian “setVolume”Atur volume video ke dari playerId yang diberikan
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setVolume({} as capVideoVolumeOptions);getMuted
Judul Bagian “getMuted”Dapatkan keadaan bisu dari video saat ini dari playerId yang diberikan
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getMuted({} as capVideoPlayerIdOptions);setMuted
Judul Bagian “setMuted”Atur keadaan bisu dari video saat ini ke playerId yang diberikan
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setMuted({} as capVideoMutedOptions);setRate
Judul Bagian “setRate”Atur kecepatan dari video saat ini dari playerId yang diberikan
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setRate({} as capVideoRateOptions);getRate
Judul Bagian “getRate”Dapatkan kecepatan dari video saat ini dari playerId yang diberikan
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getRate({} as capVideoPlayerIdOptions);stopAllPlayers
Bagian berjudul “stopAllPlayers”Berhenti semua pemain bermain
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.stopAllPlayers();showController
Bagian berjudul “showController”Tampilkan kontroler
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.showController();isControllerIsFullyVisible
Bagian berjudul “isControllerIsFullyVisible”isControllerIsFullyVisible
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.isControllerIsFullyVisible();exitPlayer
Bagian berjudul “exitPlayer”Keluar dari pemain
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.exitPlayer();Referensi Tipe
Bagian berjudul “Referensi Tipe”capVideoPlayerOptions
Bagian berjudul “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
Bagian berjudul “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
Bagian berjudul “capVideoPlayerIdOptions”export interface capVideoPlayerIdOptions { /** * Id of DIV Element parent of the player */ playerId?: string;}capVideoTimeOptions
Bagian berjudul “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
Bagian berjudul “capVideoVolumeOptions”export interface capVideoVolumeOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Volume value between [0 - 1] */ volume?: number;}capVideoMutedOptions
Bagian berjudul “capVideoMutedOptions”export interface capVideoMutedOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Muted value true or false */ muted?: boolean;}capVideoRateOptions
Bagian berjudul “capVideoRateOptions”export interface capVideoRateOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Rate value */ rate?: number;}SubTitleOptions
Bagian berjudul “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 }>;}DrmOptions
Bagian berjudul “DrmOptions”export interface DrmOptions { /** * FairPlay DRM configuration (iOS) */ fairplay?: FairPlayDrmOptions; /** * PlayReady DRM configuration */ playready?: PlayreadyDrmOptions; /** * Widevine DRM configuration (Android) */ widevine?: WidevineDrmOptions;}FairPlayDrmOptions
Bagian berjudul “FairPlayDrmOptions”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
Bagian berjudul “PlayreadyDrmOptions”export interface PlayreadyDrmOptions { /** * The URL to fetch the PlayReady license */ certificateUrl?: string;}WidevineDrmOptions
Bagian berjudul “WidevineDrmOptions”export interface WidevineDrmOptions { /** * The URL to fetch the Widevine license */ certificateUrl?: string;}Sumber Kebenaran
Bagian berjudul “Sumber Kebenaran”Halaman ini dihasilkan dari plugin’s src/definitions.ts. Re-run sinkronisasi ketika API publik berubah di atas.
Teruskan dari Getting Started
Bagian berjudul “Teruskan dari Getting Started”Jika Anda menggunakan Getting Started untuk merencanakan perilaku media asli dan interface, hubungkannya dengan Menggunakan @capgo/capacitor-player-video untuk kemampuan asli dalam Menggunakan @capgo/capacitor-player-video, Menggunakan @capgo/capacitor-aktivitas-hidup untuk kemampuan asli dalam Menggunakan @capgo/capacitor-aktivitas-hidup, @capgo/capacitor-aktivitas-hidup untuk detail implementasi dalam @capgo/capacitor-aktivitas-hidup, @capgo/capacitor-player-video untuk detail implementasi dalam @capgo/capacitor-player-video, dan Menggunakan @capgo/capacitor-navigasi-asli untuk kemampuan asli dalam Menggunakan @capgo/capacitor-navigasi-asli.