media_plyr ~ affiche un lecteur vidéo ou audio

Pour écouter un MP3 ou voir une vidéo Youtube, Vimeo, sur un serveur distant ou locale

Merci à Daneel d'avoir proposé et écrit cette action

Une action pour afficher une vidéo Youtube ou Vimeo en responsive

➠ media_plyr (vimeo,audio,video) : affiche un lecteur video ou audio qui s'inscrit au maxima dans son bloc parent DEMO
{up media_plyr=yt | code=bTqVqk7FSmY }
{up media_plyr=vimeo | code=bTqVqk7FSmY }
media_plyr : precisez yt ou youtube ou vimeo
code : il s'agit du code figurant dans l'URL de la vidéo.
-
{up media_plyr=video | poster=url image | mp4 | webm | vtt | download }
media_plyr : video pour indiquer l'URL vers la video.
poster : nom de l'image fixe
mp4, webm, vtt, download : si URL non spécifiée, elle sera déduite de celle pour 'poster'
-
{up media_plyr=audio | mp3=url fichier mp3 | ogg}
media_plyr : audio
mp3 : url vers fichier MP3 (obligatoire)
ogg : si URL non spécifiée, elle sera déduite de celle pour 'MP3'
-
author DANEEL & LOMART version v1.0 du 30-09-2017 license GNU/GPLv3
  • media_plyr (vimeo,audio,video): type de lecture : youtube, vimeo, video ou audio
  • code: code de la video (à la fin de l'url youtube ou vimeo)
  • poster: URL de l'image (obligatoire)
  • mp4: URL du fichier MP4. Si vide, on utilise le nom de poster
  • webm: URL du fichier WEBM. Si vide, on utilise le nom de poster
  • vtt: URL du fichier VTT pour sous-titrage. Si vide, on utilise le nom de poster
  • download: URL du fichier téléchargeable. Si vide, on utilise le nom du fichier MP4
  • mp3: URL du fichier audio mp3. (obligatoire)
  • ogg: URL du fichier audio ogg. Si vide, on utilise le nom du fichier MP3
  • class: classe(s) ajoutée(s) au bloc extérieur
  • style: style inline ajouté au bloc extérieur

    Lecture d'un fichier audio

    {up media_plyr=audio | mp3=images/son/melody.mp3 | class=ombre w4 wm8 ws12}

    Il suffit d'indiquer que l'on veut un lecteur audio et l'URL vers le fichier MP3. Pour les navigateurs ne prenant pas en charge le MP3, il est possible de fournir l'URL d'un fichier OGG. Si on indique OGG sans URL, UP considère que le nom de fichier est identique au MP3, seule l'extension sera modifiée. Class ajoute un ombrage et la largeur varie en fonction de la taille de l'écran.

    Comme l'action définit audio comme synonyme de media_plyr, il aurait été possible d'écrire
    {up audio | mp3=images/media/melody.mp3 | class=ombre w4 wm8 ws12}

    Lecture d'une vidéo youtube

    {up media_plyr=yt | code=OJb_vHfVSn4 }

    On indique que le lecteur est YOUTUBE ou YT. Le code est celui figurant dans l'URL de la video youtube.

    Lecture d'une vidéo vimeo

    {up media_plyr=vimeo | code=235792782 }

    On indique que le lecteur est VIMEO. Le code est celui figurant dans l'URL de la video vimeo.

    Comme l'action définit video comme synonyme de media_plyr, il aurait été possible d'écrire
    {up video=vimeo  | code=235792782 }

    Lecture d'une vidéo hébergée sur un serveur local ou distant

    {up media_plyr=video 
    | poster=https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg 
    | mp4 | webm  | download
    | vtt=https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt }

    On indique que le lecteur est VIDEO. L'option (obligatoire) POSTER est l'URL vers l'image affichée avant le lancement de la vidéo. Il est ensuite possible d'indiquer les types de fichiers disponibles (MP4, WEBM) ainsi que le lien vers les sous-titres (VTT) et le téléchargement (DOWNLOAD). Pour ces dernières options, si aucun argument n'est fourni, il sera déduit de l'URL de POSTER.

    Attention

    La saisie des paramètres doit se faire en tapant le texte directement pour éviter toutes les balises superflues.
    En cas de doute, ajouter le paramètre debug pour savoir comment votre saisie est comprise par UP.
    Vous pouvez aussi regarder votre shortcode en mode code (non WYSIWYG) pour vous assurer de sa propreté !

    Certains serveurs distant hébergeant les vidéos bloquent la lecture.
    Dans ce cas, il faut héberger la vidéo sur votre serveur ou utiliser un service comme Youtube ou Vimeo


    Pour information : comparaison des actions media_plyr et media_youtube

    media_plyr
    {up media_plyr=yt | code=OJb_vHfVSn4 }
    media_youtube
    {up youtube=OJb_vHfVSn4 }