MediaSPIP Player

Rappel des types de fichiers utilisables

kent1 — 2013-10-24T14:15:35Z

Récapitulatif des formats audios

Navigateur	Ogg Vorbis	MP3	AAC	Wav	Opus
FireFox 3.6+	oui	oui (en utilisant un fallback flash)	oui (en utilisant un fallback flash)	oui	oui
Safari 5+	non	oui	oui	oui	non
Chrome 6+	oui	oui	oui	non	non
Opera 10.5+	oui	oui (en utilisant un fallback flash)	oui (en utilisant un fallback flash)	oui	non
Internet Explorer 9	non	oui	oui	oui	non
Autres	non	oui (en utilisant un fallback flash)	oui (en utilisant un fallback flash)	oui	non

Récapitulatif des formats vidéos

Navigateur	Ogg Theora	H.264 (mp4,mov,m4v)	WebM	Flv
FireFox 3.6+	oui	oui (en utilisant un fallback flash)	oui (à partir de la version 7)	oui (en utilisant un fallback flash)
Safari 5+	non	oui	non	oui (en utilisant un fallback flash)
Chrome 6+	oui	oui	oui	oui (en utilisant un fallback flash)
Opera 10.5+	oui	oui (en utilisant un fallback flash)	oui	oui
Internet Explorer 9	non	oui	non	oui (en utilisant un fallback flash)
Autres	non	oui (en utilisant un fallback flash)	non	oui (en utilisant un fallback flash)

Les contrôles visuels et graphiques

kent1 — 2013-10-24T14:10:09Z

Les éléments de contrôle du lecteur

Par défaut, le lecteur dispose d'un certains nombre d'éléments afin de contrôler la lecture d'un document audio ou vidéo ou simplement d'avoir des informations comme la durée par exemple. Ils apparaissent dans cet ordre :

Un bouton lecture/pause ;
Un élément textuel affichant le temps de lecture écoulé ;
Une barre de progression de lecture (slider) indiquant où l'on se trouve dans la lecture, au clic sur celle-ci, le lecteur se déplace à l'endroit du clic, il est également possible de changer l'emplacement de lecture en faisant glisser la souris sur la barre (drag) au bon endroit ;
Un élément textuel affichant le temps restant de lecture, au clic sur celui ci, il affichera alors la durée totale du document ;
Un bouton activer la boucle : si activé le document se lira en boucle, sinon il s'arrêtera à la fin ;
Un bouton pour passer en mode plein écran, uniquement sur les lecteurs vidéo [1]
Une barre de progression (slider) de volume qui peut être horizontale ou verticale permettant de régler le volume sonore. Le volume est réglable soit en cliquant à l'endroit où nous souhaitons régler le volume soit en faisant glisser la souris sur la barre (drag) au bon endroit ;
Un bouton de volume, permettant, lui, de mettre en sourdine ou d'activer le son du lecteur ;

Les contrôles à la souris du lecteur

En sus des actions au clic sur les boutons visibles de l'interface du lecteur, il est également possible d'effectuer d'autres actions grâce à la souris :

Clic : en cliquant sur la vidéo ou sur le logo du son si disponible, le lecteur se mettra en lecture ou en pause en fonction de son état au moment du clic ;
Molette (roulement) : en plaçant la souris sur l'espace utilisé par le média (hover), la molette de la souris n'exerce plus l'effet habituel de scroll de la page, mais diminue ou augmente le volume ;
Déplacement de la souris : en mode plein écran d'une vidéo, le simple fait de déplacer la souris ajoute une class "hover" sur le conteneur de la vidéo. Dans le cas général cela peut être utilisé dans le cas ou en plein écran on enlève la barre de contrôle du lecteur et qu'on la remette qu'au moment où on déplace la souris (dépend du thème de lecteur utilisé) ;

Les contrôles claviers du lecteur

Plusieurs touches du clavier peuvent être utilisées pour contrôler le lecteur :

la touche espace : permet de mettre en pause un média en cours de lecture, ou de reprendre sa lecture si il est déjà en pause ;
les touches du pavé directionnels :
- la touche "haut" : permet d'augmenter le volume de 10% sur un média en cours de lecture (si le volume n'est pas déjà à 100%) ;
- la touche "bas" : permet de diminuer de 10% le volume sur un média en cours de lecture (si le volume n'est pas à 0) ;
- la touche "gauche" : permet de se déplacer de 5% de la durée totale du média vers l'arrière ;
- la touche "droite" : permet de se déplacer de 5% de la durée totale du média vers l'avant ;
la touche "F" : si une vidéo est en cours de lecture, elle permet de la passer en mode plein écran (fullscreen), uniquement sur les vidéos ;
la touche "L" : si un media est en cours de lecture, elle permet de la passer en mode "Boucle" (loop), ou de désactiver ce mode s'il est déjà en place ;
la touche "esc" : lorsque l'on est en mode plein écran, elle permet de repasser dans le mode normal, uniquement sur les vidéos ;

Codes HTML complets

Ci-dessous sont des exemples complets de ce à quoi ressemble le code généré par la librairie Javascript.

L'ensemble des éléments de contrôle sont en HTML et donc pouvant être complètement stylés via CSS.

Un lecteur vidéo

Le code suivant est celui d'une vidéo en HTML5 complète avant intervention Javascript au niveau du lecteur :

     </video>

Celui-ci correspond à celui après exécution du javascript :

<!-- Le lecteur est entouré d'une div considérée comme "wrapper" --> <div class="media_wrapper paused" style="height:370.125px; width:100%;" tabindex="-1"> <!-- La vidéo originale n'a presque pas changé : - controls a été enlevé car les controles sont maintenant fait en js -->  </source> </source> </source> </video> <!-- On ajoute ici nos controles, ils sont divisés en 3 blocs distincts : - la div de class "buttons_left" qui contient : - le bouton de lecture - la div de class "progress_bar" qui contient : - L'élément textuel indiquant le temps écoulé - La barre de progression proprement dite qui est un slider jQuery UI - L'élément textuel indiquant soit le temps restant ou, si l'on a cliqué dessus, le temps total - la div de class "buttons_right" qui contient : - Le bouton de mise en boucle; - Le bouton de passage en fullscreen; - La barre de progression de volume qui est un slider jQuery UI - Le bouton pour couper ou activer le son; --> <div class="controls small"> <div class="buttons_left"> <span title="Lire" class="play_pause_button"></span> </div> <div class="progress_bar" style="width:493px;"> <em title="Temps écoulé" class="elapsed_time">00:00</em> <div class="progress_back ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="width:404px;"> <div class="progress_loading_wrapper"> <div class="progress_loading_stripes"></div> </div> <div class="progress_buffered" style="width:1%;"></div> <div class="progress_elapsed_time"></div> <span class="progress_indicator" style="display: none;"></span> <div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 0%;"></div> <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a> </div> <em title="Temps restant" class="remaining_time remaining">-10:54</em> </div> <div class="buttons_right"> <span title="Volume (100%)" class="volume_button"></span> <span class="volume_slider_container horizontal"> <span class="volume_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> <div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width:100%;"></div> <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left:100%;"></a> </span> </span> <span title="Passer en mode plein écran" class="fullwindow_button"></span> <span title="Mettre en boucle" class="loop_button"></span> </div> </div> <div style="display:none" class="messages"></div> </div>

[1] Attention, si la vidéo est affichée avec l'alternative flash et non pas la balise HTML5, ce bouton ne s'affichera pas à cause des l'impossibilité d'appeler le plein écran de flash via Javascript. À ce moment là seul le double clic sur la vidéo permet de passer en mode plein écran.

Utilisation dans SPIP

kent1 — 2013-10-24T14:06:16Z

Cet article explique les méthodes d'utilisation dans SPIP, à la fois par le rédacteur dans ses articles, mais également par les développeurs de squelettes.

Ajout de conversions pour un fichier vidéo ou audio

MediaSPIP Player permet d'ajouter facilement pour chaque fichier audio ou vidéo un ou plusieurs fichiers correspondant à une conversion de l'original afin de le rendre lisible plus facilement sur l'ensemble des navigateurs.

Au niveau de la boite de document en bas de page de visualisation d'un objet dans l'espace privé, après mise en ligne du document original, un nouveau bouton "Ajouter une conversion apparaît".

Insérer image


Ajouter une conversion, bouton supplémentaire

Au click sur ce bouton, le formulaire de téléversement de document apparaît.


Formulaire de téléversement de conversion

Lors de l'ajout d'un document par cet intermédiaire, le document n'est pas lié à l'article mais au document original lui-même avec comme mode "conversion".


Conversions de documents

Si vous souhaitez que SPIP se charge et automatise les encodages de fichiers sonores ou vidéos, vous pouvez vous intéresser au plugin SPIPmotion [1].

Insertion lors de la rédaction de texte ou dans les squelettes

Pour insérer le lecteur que ce soit dans un article ou dans un squelette, on utilise le modèle par défaut de SPIP emb par exemple où x est le numéro du document original dans la base de donnée.

Dans les squelettes on utilisera le même modele emb.

Dans une boucle document, ceci suffit :

#MODELE{emb,id_document}

Si on souhaite pointer un document particulier :

#MODELE{emb,id_document=3}

MediaSPIP Player permet d'utiliser de nombreuses options à passer en paramètre aux modèles, elles sont détaillées dans cet article.

[1] Attention, ce plugin n'est pas utilisable sur tout type d'hébergement, il nécessite certains logiciels spécifiques afin de fonctionner

Les options du modèle emb

kent1 — 2013-10-24T13:51:14Z

Toutes les options sont détaillée en entête des squelettes des modèles audio et video qui eux mêmes sont appelés par le modèle standard emb de SPIP en fonction du type mime du fichier à afficher.

Définition de la taille et de l'emplacement du lecteur

largeur : définir la largeur du lecteur

La largeur du lecteur est indiquée par le paramètre largeur.
Elle peut être stipulée soit en px (si c'est juste un nombre), soit en pourcentage (si % est indiqué).
si aucune valeur de hauteur n'est indiqué et que la largeur est en de 100%, le même comportement que moviesize=adapt (cf : moviesize) est appliqué.

hauteur : définir la hauteur du lecteur

La hauteur quant à elle ne peut être exprimée qu'en pixels et doit être un nombre, par exemple hauteur=300.

align : définir l'alignement du lecteur

Comme les modèles par défaut de SPIP, il est possible de définit l'alignement des modèles à gauche, au centre, à droite.
Dans un appel depuis un contenu éditorial, on utilisera |left, |right ou |center.
Dans un appel depuis un squelette, on utilisera align=left, align=right ou align=center.

moviesize : adaptation ou non à 100% de l'élément parent

Le paramètre moviesize avec la valeur adapt permet de modifier automatiquement la taille du lecteur lors du chargement à 100% de l'élément parent tout en essayant de conserver le ratio de la vidéo (soit passé par le paramètre ratio au javascript, soit récupéré depuis les métadonnées de la vidéo).

Les paramètres de lectures audio et vidéo

À noter : certains de ces paramètres ne fonctionnent pas tous avec tous les navigateurs pour différentes raisons.

autoplay : lire automatiquement au chargement de la page

Pour lire la video ou le son dès l'ouverture de la page, il suffit d'utiliser le paramètre autoplay avec une valeur différente que non ou false. Par défaut, si le paramètre n'est pas utilisé, la lecture ne se lance pas au démarrage.

Exemple dans le contenu d'un texte :

|center|largeur=100%|autoplay=oui>

Exemple dans un squelette :

#MODELE{emb, id_document=4, align=center, largeur=100%, autoplay=oui}

autobuffer : précharger automatiquement le média audio ou vidéo au chargement

Pour précharger automatiquement le fichier audio ou vidéo à lire au moment de l'initialisation du lecteur dans la prévision d'une lecture future, il suffit d'utiliser le paramètre autobuffer ou preload (l'usage de ces deux paramètres sont identiques et sont là pour préserver la compatibilité ascendante).

Ce paramètre peut avoir trois valeurs différentes :

auto chargera l'ensemble de la vidéo ou du son ;
metadata arrêtera le chargement lorsque les metadatas seront reçues ;
non (valeur par défaut) ne chargera rien du tout ;

Exemple dans le contenu d'un texte s'arrêtant au chargement des metadatas :

|center|largeur=100%|autobuffer=metadata>

Exemple dans un squelette avec préchargement complet :

#MODELE{emb, id_document=4, align=center, largeur=100%, autobuffer=auto}

Note : sur les plateformes mobiles (iOS et Android), ce paramètre n'a aucune incidence car pour des raison de limitation d'utilisation de bande passante, ces plateformes ne préchargent rien lors de l'affichage de la page.

loop : boucler automatiquement

Il est possible de mettre le document en boucle automatiquement au chargement de la page avec l'option loop=oui.

Exemple dans le contenu d'un texte :

|center|largeur=100%|loop=oui>

Exemple dans un squelette :

#MODELE{emb, id_document=4, align=center, largeur=100%, loop=oui}

Les paramètres de gestion du son

volume : définir le volume par défaut au chargement du lecteur

Ce paramètre définit le volume par défaut du lecteur lors de son initialisation. Il nécessite un nombre comme valeur comme volume=50 pour 50%.

volume_bloque : rendre impossible le changement de volume

Ce paramètre permet de bloquer le niveau de volume à la même valeur que lors de l'initialisation du lecteur.

Sa valeur doit être oui pour être prise en compte, donc : volume_bloque=oui.

muted : mettre le lecteur en sourdine au démarrage

Ce paramètre permet de mettre le lecteur en sourdine lors de son initialisation.

Sa valeur doit être oui pour être prise en compte, donc : muted=oui.

muted_bloque : rendre impossible de rendre le player audible ou de le mettre en sourdine

Ce paramètre permet de bloquer le fait que le lecteur soit en sourdine (mute) ou non.

Sa valeur doit être oui pour être prise en compte, donc : muted_bloque=oui.

Les paramètres d'affichage des contrôles

controls : ne pas afficher de contrôles

Si vous souhaitez ne pas afficher les contrôles du player (barre de boutons...), il suffit de passer le paramètre controls=non au modèle.

boutons_caches : ne pas afficher certains boutons

Ce paramètre permet de ne pas afficher certains boutons spécifiques des contrôles du lecteur.

Il suffit de spécifier les noms des boutons à ne pas créer en les séparant par des virgules. Les noms des boutons possibles sont :

fullscreen ;
volume ;
loop ;

volume_slider_orientation : définir l'orientation du slider de volume

infos : ne pas afficher le titre du document

Si ce paramètre est non, le titre du document ne sera pas affiché.