🐔 chicken-player

Un player vidéo qui ne pond pas de problèmes.

Une lib JavaScript légère, sans dépendances, framework-agnostic, pour intégrer YouTube, Vimeo, Dailymotion et HTML5 dans vos projets web.

📖 Documentation · 🛝 Playground

Pourquoi ?

Parce que les players vidéo, c'est souvent lourd, opaque, et difficile à brancher sur un système de consentement.

chicken-player est léger, zéro dépendance runtime, 100% CSS pour le sizing, et s'intègre naturellement avec n'importe quel gestionnaire de consentement (ou avec tarte-aux-etrons 💩).

Installation

npm install chicken-player
# ou
pnpm add chicken-player
# ou
yarn add chicken-player

import ChickenPlayer from 'chicken-player';
import 'chicken-player/style';

Via CDN

<link rel="stylesheet" href="https://unpkg.com/chicken-player/dist/chicken-player.css">
<script src="https://unpkg.com/chicken-player/dist/chicken-player.umd.js"></script>

Démarrage rapide

<div class="chicken-player" data-type="youtube" data-id="dQw4w9WgXcQ"></div>

<script>
  const player = new ChickenPlayer();
</script>

C'est tout. Le player 🐔 s'affiche, la miniature est chargée, la vidéo se lit au clic.

Plateformes supportées

| Plateforme | data-type | data-id | |---|---|---| | YouTube | youtube | ID de la vidéo (dQw4w9WgXcQ) | | Vimeo | vimeo | ID de la vidéo (123456789) | | Dailymotion | dailymotion | ID de la vidéo (x9k8k0y) | | HTML5 | html5 | URL du fichier vidéo |

Image de couverture

Trois façons de définir la miniature affichée avant lecture :

Méthode 1 — Image dans le HTML (prioritaire)

<div class="chicken-player" data-type="youtube" data-id="dQw4w9WgXcQ">
  <img src="ma-miniature.jpg" alt="Ma vidéo">
</div>

Méthode 2 — Image par défaut globale

const player = new ChickenPlayer({
  picture: {
    src: 'https://example.com/thumbnail.jpg',
    width: 600,
    height: 400,
  },
});

Méthode 3 — Désactiver les miniatures

const player = new ChickenPlayer({ picture: false });

Priorité : HTML > config > aucune image.

Apparence & Dimensions

L'intégralité de l'apparence est contrôlée par CSS. Pour modifier les dimensions, surchargez .cbo-chickenplayer :

.cbo-chickenplayer {
  padding-bottom: 56.25%; /* ratio 16:9 par défaut */
}

Configuration

Options principales

| Option | Type | Défaut | Description | |---|---|---|---| | selector | string | .chicken-player | Sélecteur CSS des éléments player | | picture | boolean|object | {src, width, height} | Config de la miniature. false pour désactiver | | picture.src | string | placeholder CDN | URL de l'image par défaut | | a11y.playLabel | string | 'Lire la vidéo' | aria-label du bouton Play | | a11y.closeLabel | string | 'Fermer la vidéo' | aria-label du bouton Close |

Options par plateforme

YouTube

youtube: {
  host: 'https://www.youtube-nocookie.com',
  playerVars: { modestbranding: 1, controls: 1, rel: 0, loop: 0, mute: 0 },
}

Vimeo

vimeo: { muted: false, loop: false }

Dailymotion

dailymotion: {
  playerId: null,
  params: { startTime: 0, scaleMode: 'fit', loop: false, mute: false },
}

HTML5

html5: {
  controls: true, preload: 'auto', autoplay: false, loop: false,
  muted: false, playsinline: false, poster: '', width: 'auto', height: 'auto',
}

API JavaScript

play(selector?)

Lance la lecture de tous les players ou d'un player ciblé.

player.play();                    // tous les players
player.play('#mon-player');       // un player spécifique
player.play('.youtube-player');   // par sélecteur CSS

stop(selector?)

Arrête tous les players ou un player ciblé.

player.stop();
player.stop('#mon-player');

Événements de lecture

Les événements sont émis sur l'élément player et remontent jusqu'au document.

document.addEventListener('chickenPlayer.play', (e) => { /* ... */ });
document.addEventListener('chickenPlayer.stop', (e) => { /* ... */ });

// Ciblage d'un player spécifique
document.getElementById('mon-player').addEventListener('chickenPlayer.play', (e) => { /* ... */ });

Gestion du consentement

Le player peut attendre le consentement avant de charger la vidéo. Compatible avec n'importe quel gestionnaire de cookies.

Configuration globale

const player = new ChickenPlayer({
  cookies: {
    active: true,
    message: 'Acceptez les cookies pour voir cette vidéo.',
    eventConsent: 'chickenPlayer.cookies.consent',
    eventReject: 'chickenPlayer.cookies.reject',
    types: ['youtube', 'vimeo', 'dailymotion'],
  },
});

Déclencher le consentement

// Consentement accordé
window.dispatchEvent(new Event('chickenPlayer.cookies.consent'));

// Consentement refusé
window.dispatchEvent(new Event('chickenPlayer.cookies.reject'));

Avec tarte-aux-etrons

Le service chickenplayer de tarte-aux-etrons gère le consentement et le câblage des événements automatiquement :

import { createTaE, chickenplayer } from 'tarte-aux-etrons';

createTaE({
  services: [chickenplayer()],
});

// Côté player — aucune config cookies nécessaire, tout est géré par TAE
const player = new ChickenPlayer({
  cookies: { active: true, types: ['youtube', 'vimeo', 'dailymotion'] },
});

Options de consentement

| Option | Type | Défaut | Description | |---|---|---|---| | cookies.active | boolean | false | Active la gestion du consentement | | cookies.message | string | 'Pour regarder...' | Message affiché en attente de consentement | | cookies.eventConsent | string | 'chickenPlayer.cookies.consent' | Événement de consentement | | cookies.eventReject | string | 'chickenPlayer.cookies.reject' | Événement de refus | | cookies.types | array | ['youtube', 'dailymotion', 'vimeo'] | Plateformes concernées |

Accessibilité

Les boutons Play et Close exposent un aria-label personnalisable :

const player = new ChickenPlayer({
  a11y: {
    playLabel: 'Play video',
    closeLabel: 'Close video',
  },
});

Roadmap

• Mode playlist (enchaînement automatique)
• Support Twitch
• Événements par instance de player

Licence

MIT