Aller directement au contenu principal

Lecture vidéo plugin Capacitor

Jouer des vidéos natives avec sous-titres, plein écran et contrôles complets

Installer

bun add @capgo/capacitor-video-player bunx cap sync
npm, pnpm ou yarn
  • npm install @capgo/capacitor-video-player
  • pnpm add @capgo/capacitor-video-player
  • yarn add @capgo/capacitor-video-player

Guide

Comment utiliser le lecteur de vidéo dans Capacitor

Testez sur appareil

Téléchargez l'application Capgo, puis scannez le QR code.

Prévisualisation du QR code du plugin Video Player

Utilisez @capgo/capacitor-video-player

Le plugin Capacitor pour jouer un vidéo dans un lecteur natif.

Installez

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

bunx cap sync copie le code natif du plugin dans vos projets natifs. Exécutez-l’à nouveau après chaque mise à jour du plugin.

Importer

import { VideoPlayer } from '@capgo/capacitor-video-player';

API en un coup d'œil

Méthode Description
initPlayer Initialisez un lecteur de vidéo.
isPlaying Vérifiez si un joueur spécifique est en cours de lecture.
play Lancez la vidéo actuelle à partir d'un joueur spécifique.
pause Arrêtez la vidéo actuelle à partir d'un joueur spécifique.
getDuration Obtenez la durée de la vidéo actuelle à partir d'un joueur spécifique.
getCurrentTime Obtenez la position actuelle de la vidéo actuelle à partir d'un joueur spécifique.
setCurrentTime Positionnez la position actuelle pour faire défiler la vidéo actuelle à partir d'un joueur spécifique.
getVolume Obtenez le volume de la vidéo actuelle à partir d'un joueur spécifique.
setVolume Définissez le volume de la vidéo actuelle à partir d'un joueur spécifique.
getMuted Récupérez l'état de silence de la vidéo actuelle à partir d'un joueur spécifique.
setMuted Définissez le niveau de son de la vidéo actuelle à partir d'un joueur spécifique.
setRate Définissez le taux de lecture de la vidéo actuelle à partir d'un joueur spécifique.
getRate Obtenez le taux de lecture de la vidéo actuelle à partir d'un joueur spécifique.
stopAllPlayers Arrêtez tous les joueurs en cours de lecture.
showController Affichez le contrôleur.
isControllerIsFullyVisible isControllerIsFullyVisible.
exitPlayer Sortir du lecteur.
hidePlayer Cachez l'interface utilisateur du lecteur actuellement présentée sans arrêter la lecture (plein écran natif).
showPlayer Afficher à nouveau un joueur UI précédemment caché (plein écran natif).

Exemples

initPlayer()

Initialiser un lecteur vidéo.

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.initPlayer({ mode: 'fullscreen' });
console.log(result);

isPlaying()

Vérifier si un joueur spécifique est en cours de lecture.

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.isPlaying({ playerId: 'player-id-123' });
console.log(result);

play()

Lire la vidéo actuelle à partir d'un joueur spécifique.

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.play({ playerId: 'player-id-123' });
console.log(result);

pause()

Pause the current video from a given playerId.

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.pause({ playerId: 'player-id-123' });
console.log(result);

getDuration()

Obtenir la durée de la vidéo actuelle à partir d'un joueur spécifique.

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.getDuration({ playerId: 'player-id-123' });
console.log(result);

getCurrentTime()

Obtenir le temps actuel de la vidéo actuelle à partir d'un joueur spécifique.

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.getCurrentTime({ playerId: 'player-id-123' });
console.log(result);

La table ci-dessus répertorie les 19 méthodes de base. Les aides aux écouteurs et aux versions, ainsi que la pleine convention de chaque méthode, sont documentés dans le le dépôt GitHub.

Référence complète

Continuez à partir de l'utilisation de @capgo/capacitor-video-player

Si vous utilisez L'utilisation de @capgo/capacitor-video-player Pour planifier le comportement des médias et de l'interface natifs, connectez-l’avec @capgo/capacitor-joueur-de-videos pour les détails d'implémentation dans @capgo/capacitor-video-player Getting Started pour les détails d'implémentation dans Démarrage L'utilisation de @capgo/capacitor-live-activities pour la capacité native dans l'utilisation de @capgo/capacitor-live-activities @capgo/capacitor-activités en direct pour les détails d'implémentation dans @capgo/capacitor-activités en direct, et En utilisant @capgo/capacitor-navigation native pour la capacité native dans En utilisant @capgo/capacitor-navigation native.

FAQ

Foire aux questions

Comment puis-je installer le plugin de lecture vidéo dans une application Capacitor ?

Run "bun add @capgo/capacitor-video-player" (or "npm install @capgo/capacitor-video-player"), then run "bunx cap sync" so the iOS and Android projects pick up the native code. Import it from "@capgo/capacitor-video-player" in your app code.

Fonctionne-t-il @capgo/capacitor-video-player avec React, Vue et Angular ?

Yes. Video Player is a Capacitor package, so it works with any web framework that runs inside Capacitor, including Ionic, React, Vue, Angular, Svelte and plain JavaScript.

Quelle version de Capacitor est prise en charge par @capgo/capacitor-video-player ?

Capgo plugins follow Capacitor's major version: use the plugin major version that matches your Capacitor major version (for example plugin v8 with Capacitor 8). The compatibility table in the GitHub README lists the maintained versions.

Est-ce que @capgo/capacitor-video-player est gratuit et open source ?

Yes. The source code is public on GitHub at https://github.com/Cap-go/capacitor-video-player/ and the package is free to install from npm. Bug reports and pull requests are welcome.

Puis-je mettre à jour code qui utilise le lecteur vidéo sans passer par une revue de l'App Store ?

Installing or upgrading the plugin changes native code, so it needs a new store build. After that, JavaScript, HTML and CSS changes that call the plugin can ship instantly with Capgo live updates.

Envoyer les modifications du lecteur vidéo sans attendre la revue de l'application

Une fois le plugin est dans votre magasin de build, Capgo les mises à jour en direct poussent vos modifications JavaScript, HTML et CSS vers les utilisateurs en quelques minutes.

Commencez avec Capgo