Aller au contenu principal

Lecteur vidéo Plugin Capacitor

Lecture vidéo native 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 Video Player dans Capacitor

Tester sur l'appareil

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

Lien QR d'aperçu du plugin Video Player code

Utiliser @capgo/capacitor-video-player

Le plugin Capacitor pour lire des vidéos dans un lecteur natif.

Installer

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

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

Importer

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

Aperçu de API

Méthode Description
initPlayer Initialiser un lecteur vidéo.
isPlaying Indiquer si un playerId donné est en cours de lecture.
play Lire la vidéo actuelle pour un playerId donné.
pause Mettre en pause la vidéo actuelle pour un playerId donné.
getDuration Récupérer la durée de la vidéo actuelle pour un playerId donné.
getCurrentTime Récupérer le temps de lecture actuel de la vidéo pour un playerId donné.
setCurrentTime Définir le temps de lecture (seek) de la vidéo pour un playerId donné.
getVolume Récupérer le volume de la vidéo actuelle pour un playerId donné.
setVolume Définir le volume de la vidéo actuelle pour un playerId donné.
getMuted Récupérer l'état muet de la vidéo actuelle pour un playerId donné.
setMuted Définit le mode muet de la vidéo actuelle à partir d'un playerId donné.
setRate Réglez la vitesse de la vidéo actuelle via un playerId donné.
getRate Récupérez la vitesse de la vidéo actuelle via un playerId donné.
stopAllPlayers Arrêter tous les lecteurs en cours.
showController Afficher le contrôleur.
isControllerIsFullyVisible isControllerIsFullyVisible.
exitPlayer Quitter le lecteur.
hidePlayer Masquez l'interface du lecteur actuel sans arrêter la lecture (plein écran natif).
showPlayer Réaffichez l'interface du lecteur précédemment masquée (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()

Indiquer si un playerId donné 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 pour un playerId donné.

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

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

pause()

Mettre en pause la vidéo actuelle pour un playerId donné.

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

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

getDuration()

Récupérer la durée de la vidéo actuelle pour un playerId donné.

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

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

getCurrentTime()

Récupérer le temps de lecture actuel de la vidéo pour un playerId donné.

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

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

Le tableau ci-dessus liste les 19 méthodes principales. Les helpers de listener et de version, ainsi que le contrat complet de chaque méthode, sont documentés dans la dépôt GitHub.

Référence complète

Continuer depuis Utiliser @capgo/capacitor-video-player

Si vous utilisez Utiliser @capgo/capacitor-video-player pour planifier le comportement des médias et de l'interface natifs, connectez-l’à @capgo/capacitor-video-player pour le détail d'implémentation dans @capgo/capacitor-video-player, Prise en main pour les détails d'implémentation dans Getting Started Utiliser @capgo/capacitor-live-activities pour la capacité native dans Utiliser @capgo/capacitor-live-activities @capgo/capacitor-live-activities pour les détails d'implémentation dans @capgo/capacitor-live-activities, et Utilisation de @capgo/capacitor-native-navigation pour la fonctionnalité native dans Using @capgo/capacitor-native-navigation.

FAQ

FAQ du plugin Video Player

Comment installer le plugin Video Player dans une application Capacitor ?

Exécutez "bun add @capgo/capacitor-video-player" (ou "npm install @capgo/capacitor-video-player"), puis lancez "bunx cap sync" pour que les projets iOS et Android prennent en compte le code natif. Importez-le depuis "@capgo/capacitor-video-player" dans le code de votre application.

Est-ce que @capgo/capacitor-video-player fonctionne avec React, Vue et Angular ?

Oui. Video Player est un package Capacitor, il fonctionne donc avec n'importe quel framework web tournant sous Capacitor, y compris Ionic, React, Vue, Angular, Svelte et le JavaScript pur.

Quelle version de Capacitor est supportée par @capgo/capacitor-video-player ?

Les plugins Capgo suivent la version majeure de Capacitor : utilisez la version majeure du plugin qui correspond à la version majeure de votre Capacitor (par exemple le plugin v8 avec Capacitor 8). Le tableau de compatibilité du README de GitHub recense les versions maintenues.

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

Oui. Le code source de code est public sur GitHub à l'adresse https://github.com/Cap-go/capacitor-video-player/ et le package est gratuit sur npm. Les rapports de bugs et les pull requests sont les bienvenus.

Puis-je mettre à jour code utilisant Video Player sans passer par une revue de l'App Store ?

L'installation ou la mise à jour du plugin modifie le code natif, ce qui impose un nouveau build pour les stores. Ensuite, les changements JavaScript, HTML et CSS qui appellent le plugin peuvent être livrés instantanément via les live updates de Capgo.

Déployez les changements du Video Player sans attendre la validation de l'app

Une fois le plugin intégré à votre build de store, Capgo live updates déploie vos changements JavaScript, HTML et CSS aux utilisateurs en quelques minutes.

Commencez avec Capgo