Ely Video Player

Un lecteur vidéo React Native personnalisable avec contrôles avancés.

Installation

npm install ely-video-player
# ou
yarn add ely-video-player

Utilisation

import { ElyVideoPlayer } from "ely-video-player";

const App = () => {
  return (
    <ElyVideoPlayer
      source={{ uri: "https://example.com/video.mp4" }}
      poster="https://example.com/poster.jpg"
      onProgress={(progress) => console.log("Progress:", progress)}
      onEnd={() => console.log("Video ended")}
      controlsConfig={{
        showPlayPause: true,
        showFullscreen: true,
        showQuality: true,
        showCast: true,
        showBackButton: true,
        showTime: true,
        showSlider: true,
        showFastForward: true,
        showRewind: true,
      }}
      theme={{
        primaryColor: "#f0738a",
        backgroundColor: "rgba(0, 0, 0, 0.5)",
        controlsBackground: "rgba(255, 255, 255, 0.3)",
        textColor: "#ffffff",
      }}
      gestureConfig={{
        enableDoubleTap: true,
        enableSwipe: true,
        doubleTapInterval: 800,
        swipeThreshold: 50,
      }}
      progressConfig={{
        saveProgress: true,
        saveInterval: 5000,
        onProgressSave: (progress) => {
          console.log("Progress saved:", progress);
        },
      }}
      chapterConfig={{
        showChapterMarkers: true,
        chapterStyle: {
          markerColor: "#f0738a",
          markerWidth: 2,
        },
      }}
      appStateConfig={{
        pauseOnBackground: true,
        resumeOnForeground: false,
      }}
      qualities={[
        { label: "Auto", value: "auto" },
        { label: "1080p", value: "1080p" },
        { label: "720p", value: "720p" },
        { label: "480p", value: "480p" },
        { label: "360p", value: "360p" },
      ]}
      chapters={[
        { time_start: "00:00", title: "Introduction" },
        { time_start: "02:30", title: "Premier chapitre" },
        // ...
      ]}
    />
  );
};

Props

Props de base

• source: Source de la vidéo (objet avec uri)
• poster: URL de l'image de couverture
• style: Styles personnalisés pour le conteneur
• onProgress: Callback appelé lors de la progression de la vidéo
• onEnd: Callback appelé à la fin de la vidéo
• onLoad: Callback appelé au chargement de la vidéo
• onPlay: Callback appelé au démarrage de la lecture
• onPause: Callback appelé à la mise en pause
• onSeek: Callback appelé lors du déplacement dans la vidéo
• onFullScreenChange: Callback appelé lors du changement de mode plein écran

Props de personnalisation (controlsConfig)

• showPlayPause: Afficher le bouton lecture/pause
• showFullscreen: Afficher le bouton plein écran
• showQuality: Afficher le menu de qualité
• showCast: Afficher le bouton de cast
• showBackButton: Afficher le bouton retour
• showTime: Afficher le temps de lecture
• showSlider: Afficher la barre de progression
• showFastForward: Afficher le bouton avance rapide
• showRewind: Afficher le bouton retour rapide

Props de style (theme)

• primaryColor: Couleur principale des contrôles
• backgroundColor: Couleur de fond des contrôles
• controlsBackground: Couleur de fond des boutons de contrôle
• textColor: Couleur du texte

Props de configuration

• bufferConfig: Configuration du buffer vidéo
• maxBitRate: Débit maximum de la vidéo
• progressUpdateInterval: Intervalle de mise à jour de la progression
• resizeMode: Mode de redimensionnement de la vidéo
• repeat: Répéter la vidéo
• autoPlay: Démarrer automatiquement

Props de fonctionnalités

• chapters: Liste des chapitres de la vidéo
• qualities: Liste des qualités disponibles
• initialPosition: Position initiale de la vidéo

Props de callback

• onChapterChange: Callback appelé lors du changement de chapitre
• onQualityChange: Callback appelé lors du changement de qualité
• onControlsVisibilityChange: Callback appelé lors du changement de visibilité des contrôles

Props de gestes (gestureConfig)

• enableDoubleTap: Activer les doubles-taps pour l'avance/retour rapide
• enableSwipe: Activer les gestes de swipe
• doubleTapInterval: Intervalle maximum entre deux taps (en ms)
• swipeThreshold: Seuil de détection des swipes (en pixels)

Props de progression (progressConfig)

• saveProgress: Activer la sauvegarde automatique de la progression
• saveInterval: Intervalle de sauvegarde (en ms)
• onProgressSave: Callback appelé lors de la sauvegarde de la progression

Props de chapitres (chapterConfig)

• showChapterMarkers: Afficher les marqueurs de chapitres
• chapterStyle: Style des marqueurs de chapitres
  • markerColor: Couleur des marqueurs
  • markerWidth: Largeur des marqueurs

Props d'état de l'application (appStateConfig)

• pauseOnBackground: Mettre en pause la vidéo en arrière-plan
• resumeOnForeground: Reprendre la lecture au retour au premier plan

Fonctionnalités

• Lecture/pause
• Contrôle du volume
• Mode plein écran
• Sélection de la qualité
• Navigation par chapitres
• Avance/retour rapide
• Barre de progression personnalisable
• Support du casting
• Thème personnalisable
• Contrôles masquables
• Support des posters
• Gestion de la mémoire tampon optimisée
• Gestes tactiles (doubles-taps, swipes)
• Sauvegarde automatique de la progression
• Gestion intelligente de l'état de l'application
• Marqueurs de chapitres personnalisables

Contribution

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou à soumettre une pull request.

Licence

MIT