Extension:TimedMediaHandler/lecteur VideoJS
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
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 :
- touches k ou Espace
- Lancer/mettre en pause la lecture du média
- touche f
- Passer en/sortir du plein écran
- touche m
- Couper le son
- Le lecteur est intégralement utilisable avec le clavier en utilisant les touches Tab, Entrée et Espace
Problèmes connus
- Les sous-titres peuvent ne pas s'afficher sur certains fichiers. Nous avons arrêté le support du balisage format wikicode dans les sous-titres en 2022. Il est recommandé de réécrire ces sous-titres (T224258).
- L'audio ouvre un dialogue plutôt qu'il ne s'affiche en ligne lorsqu'une transcription existe. Ceci est une modification volontaire qui nous permettra à l'avenir d'afficher des transcriptions pour l'audio. Voir T246035
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
// 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>
Configuration avancée avec prise en charge de Ogv.js
Si vous avez besoin de lire des fichiers OGG ou WebM inter-plateformes (beaucoup de fichiers de Commons ont ces formats), vous pouvez utiliser le greffon Ogv.js pour Video.js également inclus dans TimedMediaHandler. Exemple de configurationː
var player;
// charger les modules appropriés dans le ResourceLoader
mw.loader.using( 'ext.tmh.videojs-ogvjs' ).then( function () {
// charger ogvjs si besoin; et quand c'est fini,
// tout le code nécessaire est chargé
return mw.OgvJsSupport.loadIfNeeded();
} ).then( function () {
player = videojs( 'my-player-id', {
controls: true,
autoplay: false,
poster: 'https://path/to/my/image',
sources: [ /* tableau des sources */ ],
// configuration spécifique à Ogv.js
ogvjs: {
base: mw.OgvJsSupport.basePath()
}
} );
} );