Extension:TimedMediaHandler/lecteur VideoJS

Capture d'écran du lecteur VideoJS en action

Le lecteur VideoJS est le lecteur vidéo de MediaWiki pour les projets Wikimedia.

Il est basé sur VideoJS, et possède une interface utilisateur moderne, rapide, et compatible avec les appareils mobiles et HTML5.

Utilisation

Exemple de lecteur vidéo

Exemple de lecteur audio

Example audio player with subtitles

Il possède à la fois un lecteur audio et un lecteur vidéo. Cette page présente des exemples de ces deux lecteurs. Une fois le lecteur lancé, vous verrez une barre de contrôle quand vous agirez sur la vidéo.

Les commandes sont, de gauche à droite :

•  Bouton lecture/pause
•  Réglage du volume
• Progression de la lecture
• Temps de lecture restant
•  Sélecteur de langue des sous-titres et boutons de réglage du style des sous-titres.
•  Sélecteur de résolution
•  Bouton "Image incrustée dans l'image" éventuel
•  Bouton plein écran
•  Bouton "info" pour accéder à la page de description du fichier

Commandes avec la souris et le clavier

• Cliquez sur l'icône de lecture au-dessus de la miniature pour commencer la lecture du média.
• Clic droit ou clic molette sur la miniature pour ouvrir la page de description du fichier
• Lancez et mettez en pause le lecteur avec un simple clic à l'intérieur de sa fenêtre
• Double-cliquez sur la fenêtre du lecteur pour passer en mode plein écran ou en sortir
• Les commandes au clavier disponibles sont les suivantes :

  k / Space

  Lancer/mettre en pause la lecture du média

  f

  Passer en/sortir du plein écran

  m

  Couper le son

  c / s

  Toggle subtitles on / off

  < / >

  Decrease and increase playback speed

  ← / →

  Skip 5 seconds back / forward

  j / l

  Skip 10 seconds back / forward

  Home / End

  Skip to start / end of video

  , / .

  When paused, skip 1 frame back or forward

• Le lecteur est intégralement utilisable avec le clavier en utilisant les touches Tab, Entrée et Espace

Problèmes connus

Le lecteur vidéo est toujours en développement, mais si vous rencontrez des problèmes, merci de les signaler sur la page de discussion ou de créer un rapport sur Phabricator.

Développeurs 

Les développeurs qui travaillent sur les fonctionnalités impliquant le lecteur Video.js, devront l'initialiser et le configurer correctement. Vous trouverez ci-après un exemple typique d'utilisation.

Exemple de configuration de base

Cette partie est ancienne et devrait être retravaillée afin de montrer l'utilisation de nos conteneurs (wrappers) qui appliquent des options et des paramètres cohérents pour la lecture avec VideoJS.

// Le premier argument peut être un ID de chaîne ou un élément <video>
var player = videojs( 'my-player-id', {
    controls: true,
    autoplay: false,
    poster: "https://path/to/poster/image"
    sources: [ /* tableau de fichiers source de taille et formats variés */ ]
} );

Le sources peut également être fourni dans l'élément HTML ‎<video> au lieu d'être dans le JS :

<video class="video-js">
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>