Ref: https://github.com/mediaelement/mediaelement/blob/master/MIGRATION.md#migrating-from-4x-to-5x-version

Jack31 a rédigé il y a un an et marcimat a validé il y a un an

Refs: spip#5667

#4506 : on revoit le markup des modeles document pour supprimer le `max-width` en dur
- on ajoute un div conteneur qui porte les classes `spip_document*`
- le `<figure>` porte une classe `spip_doc_inner`
- les classes au pluriel `spip_documents_*` sont doublees d'un renommage au singulier `spip_document_*` comme cela a été fait pour `spip_logo`
- on supprime le `max-width` en dur

Avec ça les modèles doc tombent a peu près bien par défaut sur un squelette stylé pour les anciens modèles doc, sauf audio et video dont le player ne se centre pas et quelques petits cas limites

- il suffit d'**ajouter** les règles CSS suivantes pour adapter un squelette aux nouveaux modèles :
```
.spip_document { display: flex; justify-content: center;align-items: center}
.spip_doc_inner{ margin:0 auto;text-align: center;max-width: 100%;}
.spip_doc_inner>* {margin-left: auto;margin-right: auto;}
.spip_document .spip_doc_lien { display: inline-block; }
.spip_doc_legende { display: block; max-width: 25em; }
```

On note que ces règles ne ciblent que des classes présentes sur les nouveaux modèles, et peuvent donc être ajoutées à tout squelette sans casser l'affichage sur les versions précédentes de SPIP, ou avec le plugin de compatibilité qui rétablit les anciens modèles.

Co-authored-by: Cerdic <cedric@yterium.com>
Reviewed-on: https://git.spip.net/spip/medias/pulls/16


Co-Authored-By: cerdic <cedric@yterium.com>
Co-Committed-By: cerdic <cedric@yterium.com>

marcimat a rédigé il y a 4 ans et cerdic a validé il y a 4 ans

On ajoute pareil pour des attributs supplémentaires.
On propose d'ajouter data-legende-len et data-legende-lenx qui indique une longueur approximative de légende,
de sorte de pouvoir styler en CSS différement possiblement selon la longueur de cette légende.

marcimat a rédigé il y a 4 ans et cerdic a validé il y a 4 ans

On ajoute une classe sur le document (spip_document--legende) pour indiquer s'il contient une légende,
de sorte qu'on puisse le styler différemment avec ou sans légende (notamment pour les images...)

Fix https://core.spip.net/issues/4614 : permettre de surcharger titre/descriptif/credit des documents au cas par cas quand on insere dans le contenu

pour permettre la gestion de l'URL par le plugin accès restreint configuré avec accesrestreint_proteger_documents à oui dans une mutu, utiliser #URL_DOCUMENT plutôt que #FICHIER pour la source du media dans le player (ce qui est la rêgle pour les autres modèles de documents embed)

* on declare le routeur de modele medias_modeles_styliser qui redirige les raccourcis img, doc et emb selon la regle suivante
   - le nouveal modele correspond au champ media du document : image, audio, video, file
   - si une declinaison correspondant au raccourci initial (_img, _doc ou _emb) existe on la prend
     -> un modele file_emb.html reprend le mecanisme d'embed generique selon extension+mime-type de l'ancien modele emb.html
* les 4 modeles de base image, audio, video, file et les declinaisons file_emb sont toutes en <figure></figure>
* les styles en dur float sont supprimes, on ne garde qu'un width:{largeur}px sur l'element <figure> qui permet d'avoir un conteneur ajuste
  - il se contourne facilement par un min-width:100%; ou un width:auto !important;
* spip_doc_titre, spip_doc_descriptif et spip_doc_credits sont regroupes dans le figcaption.spip_doc_legende
* les modeles historiques doc, img et emb disparaissent. Les eventuels modeles surcharges dans squelettes/ sont ignores
* les 3 modeles image, audio et video ajoutent des conditions sur leur boucle, pour etre sur qu'on a bien a faire avec le bon type de media, et sinon renvoient vers le modele file
* le mode du document n'est plus considere dans aucun modele dans le format de l'affichage qui n'en depend donc plus du tout

En pratique donc <emb>, <img> et <doc> sont equivalents pour les medias audio, video, image (et consistent a afficher/embed le media par defaut)
Pour les autres types de media <doc> affiche le lien vers le document avec une vignette + legende, et <emb> affiche un traitement differencie en fonction du mime type
On peut utiliser le raccourci <fileXX> pour n'importe quel media
Si on utilise <imageXX> ou <audioXX> ou <videoXX> sur un media inaproprie ca affichera le contenu de <fileXX>

Report de r108328 : Renseigner la duree du son ou de la video si on a l'info en base (en general oui avec ID3)

Report de r108321 : Suite de r108317 : pas de mejs__player sur video non plus, et aussi on evite que le script mejs-init de doublle initialise un audio ou un video avec cette classe

Demande de Cédric : « De mémoire ce preload="none" n'était pas un hasard, car il vise à éviter de lancer le download de X vidéos si tu as X players sur ta page, la plupart des visiteurs ne les jouant pas (et le raisonnement vaut encore avec X=1)

Ça a un impact fort sur la bande passante consommée par les sites qui utilisent des vidéos, car si tu multiplies par le nombre de sites x le nombre de page x le nombre de visites x la taille d'une vidéo, tu te rends compte que le changement de réglage a une conséquence écologique fortement négative. »

cf http://permalink.gmane.org/gmane.comp.web.spip.zone.cvs/100311

Il manquait la classe mejs__player pour avoir le bon style (au passage, ça fait perdre le bouton de download intégré)

Et aussi preload="auto" pour avoir la durée affichée dès le départ.

Testé sous Windows 10 avec Edge, FireFox et Chrome en utilisant les .mp4, .ogg et .mp3 utilisés par http://www.mediaelementjs.com/

Pas testé les skins.

Doubles espaces en moins

Les commentaires HTML dans des #REM, ça ne sert à rien de les afficher dans le code généré

Balise </span> isolée dans les modèles video et audio, échappement de & en &amp; et incrément de z (cf #3419)

Mise a jour de l'initialisation : chargement plus rapide de la CSS (en meme temps qu'on lance le chargement du js, et pas lors de l'init du player)
+ mise a jour optimisation du js d'initialisation (report du plugin player)

Report de js init du plugin player : le css est injecte en async dans un link plutot que inline repete a chaque player

Implementation non bloquante : utiliser <style> inline plutot qu'un <link> (invalide qui plus est dans le <body>)

pas de |unique c'est une mauvaise idee (le pemier passage a lieu quand on calcule le #DESCRTIPTIF pour les meta, et du coup on insere plus le js dans le corps de l'article sur une page articles)

On integre getID3 pour permettre la lecture des metadata des video (largeur, hauteur, duree) (version tres simplifiee de ce que fait le plugin getID3, merci a kent1)
+ bugfix sur l'affichage en taille reduite dans le formulaire d'edition

on factorise le js d'init commun a l'audio et la vido dans un js externe insere inline au moins une fois dans une page qui contient un ou plusieurs documents audio/video
le js d'init ne craint pas d'etre insere plusieurs fois, ce qui peut arriver si on charge des bouts de page en ajax par exemple