PeterRabbit

[Modification et astuce] Plyr, le player audio-vidéo qu'il vous faut !

Messages recommandés

PeterRabbit    283

Plyr, le player audio-vidéo qu'il vous faut !

Voir le fichier

Vous cherchez un player audio-vidéo qui s'adapte sans problème à ZwiiCMS et qui soit léger, polyvalent et esthétique ?

Un petit détour sur le site de Plyr vous convaincra qu'il est bien ce qu'il affirme : "a simple, accessible HTML5 media player", un player HTML5 simple à paramétrer qui vous permettra d'intégrer facilement des vidéos (les vôtres ou celles de Youtube) ou des fichiers audio sur votre site, le tout dans un format responsive.

 

Avertissements
Même si le plugin a été réécrit sur la base de la version 8.29 de ZwiiCMS, le player n'a été actualisé qu'à hauteur de la version 2.0.18, faute d'être parvenu à faire accepter les codes d'intégration de la version 3 à TinyMCE. o.O
Le script d'installation effectue seulement deux écritures ponctuelles dans "core/layout/main.php", mais il écrase le fichier "core/core.js.php" pour pouvoir remplacer le script qui pose problème. Faites-en une copie de sécurité si vous l'avez personnalisé.

 

Installation
L'archive contient deux modules :

  • "plyr_install", pour installer le player.
  • "plyr_restaure", pour remettre votre site dans son état initial s'il ne correspond pas à vos attentes.

 

Pour chacun des modules :

  • Copiez la totalité de son contenu à la racine du répertoire d'installation de votre site.
  • Acceptez les remplacements de fichiers qui vous seront proposés.
  • Rendez-vous ensuite sur votre site ou rafraîchissez la page pour finaliser l'installation.

C'est fait.

 
Utilisation
Collez ces lignes dans le code de vos pages (icone "<>" de la barre d'outils) en les adaptant à votre configuration et au type de vos fichiers.

 

Audio

<audio controls>
<source src="chemin/vers/votre.mp3" type="audio/mp3">
</audio>

Vidéo

<video controls>
 <source src="chemin/vers/votre video.mp4" type="video/mp4">
</video>

ou, si vous avez prévu une image d'accueil 

<video poster="chemin/vers/votre image d'accueil.jpg" controls>
<source src="chemin/vers/votre video.mp4" type="video/mp4">
</video>


Youtube

<div data-type="youtube" data-video-id="bTqVqk7FSmY"></div>

 

Vimeo

<div data-type="vimeo" data-video-id="143418951"></div>


Conseils

  • Utilisez le code d'intégration fourni par Youtube, Viméo, Dailymotion, etc. plutôt que de passer par Plyr.
  • Pour en savoir plus sur Plyr et ses possibilités, consultez le fichier "readme_2.0.18.md".

 

o.O


 

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité

Testé et approuvé par un " fana du multimédia en toute sorte "

Moi ce qui me plais dans ton plugin c'est que l'on peut mettre les mains dans le cambouis et le personnaliser à souhait ( dixit le lien que tu as mis vers les originaux sur github )

 

Puis il lit vraiment toute sorte de fichiers hébergés sur différentes plateforme du web tout comme ceux que nous hébergeons en propre main chez nous ...

 

Polyvalent à souhait si l'on suit les tutos fournis par Sam Potts le développeur originel de ce lecteur formidablement adapté à notre cms Zwii par toi mon cher ami .

Simple d'utilisation si l'on suit ton excellent tutoriel et " faible sur la longueur " vu les nombreux autres " grands cms " du marché qui ont adopté en plugin ce lecteur multimédia paré pour le html5 !!!

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité

Juste pour vous monter à quel point c'est facile d'utiliser ce plugin, une petite vidéo de démo ( sans le son bien entendu :mrgreen: ) afin que vous puissiez vous en faire l'idée de son utilisation dans un zwii 8.1.0 ...

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité simon511000   
Invité simon511000
Le 17/08/2017 à 09:48, Roger nounours a dit :

sans le son

 

Le 17/08/2017 à 09:48, Roger nounours a dit :

bien entendu

 

:joy:

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité

Simon des fois ma voix est moins belle que les images qui montrent juste comment faire visuellement...mais rassures toi, je fais aussi des tutos avec le son de ma douce voix éraillées par le tabac xD

Partager ce message


Lien à poster
Partager sur d’autres sites
omega    25

Bonjour à tous , merci d ' avance  pour votre accueil ,

merci également au développeur de Zwii de nous faire partager son cms.


j ' ai mis en place 2 sites web  un sous spip pour une association et un autre pour un ami sous pluxml.

Ce qui m 'attire chez Zwii c 'est la simplicité , tous ce qu il faut pour faire un site web sans trop réfléchir , merci à l 'auteur.
par contre je rencontre un problème avec Plyr , marche très bien avec les fichiers audio , mais pas avec les vidéos

 

ne fonctionne pas ----> <div data-type="vimeo" data-video-id="219108693">&nbsp;</div>

fonctionne très bien en Iframe --->  <p><iframe src="//player.vimeo.com/video/219108693?title=0&amp;portrait=0&amp;byline=0&amp;color=d58940" width="530" height="298" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

 

ce lecteur est il compatible avec la version 8 ? j 'ai loupé quelque chose ?

 

merci d ' avance pour votre aide
Bruno
 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    283

Bonjour @omega. J'ai pris connaissance de ton problème, mais je t'avouerai que ce plugin m'est totalement sorti de la tête — il ne date pourtant que du mois d'août... :$

En tout cas, il fonctionne bien avec la v.8. Je réinstalle la sauvegarde et je regarde.

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    283

@omega Désolé — mais content pour toi ! :)  Où est le problème ? Je n'avais jamais essayé avec des vidéos Vimeo.

 

vimeo.jpg.921604fccdb9f4ccdf7f2b5241564933.jpg

 

Le code entré avec "Outils" > Code source" dans la barre de menu de l'éditeur ?

<div data-type="vimeo" data-video-id="219108693">&nbsp;</div>

Le même que le tien, non ? O.o

<div data-type="vimeo" data-video-id="219108693">&nbsp;</div>

 

Dis-moi si tu as réussi. o.O

Modifié par PeterRabbit (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
omega    25

Bonjour Peter et merci pour ton aide

oui c 'est ça que j 'ai dans le code source ...

 

<p>Video avec lecteur Plyr</p>
<div data-type="vimeo" data-video-id="219108693">&nbsp;</div>
<p>Video avec Iframe<br /> <iframe src="//player.vimeo.com/video/219108693?title=0&amp;portrait=0&amp;byline=0&amp;color=d58940" width="530" height="298" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

 

peut être que j 'ai un problème de navigateur ? (Firefox)

 

 peux tu ouvrir la page ci dessous , est ce que cela fonctionne chez toi ?

http://zwii.brokerne.eu/?video

 

pour les fichier audio cela fonctionne chez moi , mais pas les vidéos

lien

http://zwii.brokerne.eu/?radios

 

Nota:site en construction

 

Bruno

 

image.thumb.png.78ace0d573dc564f20e76e7a81a3f557.png

 

Modifié par omega (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    283

@omega Je ne comprends pas. En effet, la première vidéo ne s'affiche pas — et Firefox n'est pas en cause : j'ai vérifié aussi.

Question bête : tu as essayé avec juste le code 

<div data-type="vimeo" data-video-id="219108693">&nbsp;</div>

sans l'iframe comme je l'ai fait sur mon site ?

 

En tout cas, il est zouli ton site en construction ! Autre question bête : il pleut souvent en Bretagne ? xD

 

Modifié par PeterRabbit (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
omega    25

j 'ai tout enlevé , et mis simplement le code ci dessous , rien ne s ' affiche , c 'est curieux , si la communauté à des pistes n ' hésitez pas ...

j 'avais même enlevé mon perso.css au cas ou..

merci encore Peter pour ton aide
si je te dis qu' aujourd’hui , il fait beau tu me croiras pas !

<div data-type="vimeo" data-video-id="219108693">&nbsp;</div>

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    283

Autre question : as-tu bien installé le plugin à la racine de ton site ?  J'en doute un peu... Voici le player audio de Plyr :

 

plyr.jpg.9407960d3f7923638dd140c9df902048.jpg

 

Parcours l'arborescence de ton site. Un répertoire "plyr" devrait être dans "core/vendor".

Édite aussi le fichier "core/layout/main.php" et regarde s'il y a cette ligne à la ligne 12 :

<link rel="stylesheet" href="<?php echo helper::baseUrl(false); ?>core/vendor/plyr/plyr.css">

 

Modifié par PeterRabbit (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
omega    25

je n 'ai pas de répertoire Plyr dans "core/vendor" ni la ligne 12  , j 'ai fais l 'installation  "semiauto"

pour "plyr"

  • Après avoir décompressé le zip, copiez-en le contenu (un dossier "core" et un fichier "index.php") à la racine du répertoire d'installation de votre CMS.
  • Acceptez le remplacement du fichier "index.php".
  • Connectez-vous ensuite à votre site pour finaliser l'opération.

je vais refaire l 'installation , et je tiens au courant ...merci encore

pour l 'heure j 'ai promis à ma fille de faire des crêpes , en Bretagne c 'est sacré".

Bonne fin de journée

 

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    283

@omega Eh oui, il faut que l'utilisateur mette un peu la main à la pâte ! xD

 

Tu sais quoi ? Tu devrais chercher le dossier "plyr" dans l'arborescence de ton site et le supprimer. Et il doit y avoir un fichier "index.php" qui se promène ailleurs qu'à la racine, supprime-le aussi. La racine, c'est ici : 

 

racine.jpg.6b2e63b900f54c7d245c3b6a21b783cc.jpg 

 

Bonnes crêpes ! 24.gif.9aea431f43aff1226c516b61edf6943f.gif

 

 

 

 

 

 

Modifié par PeterRabbit (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
omega    25

j ' ai compris mon erreur , mais je ne sais pas comment la résoudre , car la racine de mon site c 'est mon domaine principale

zwii est installé en sous domaine

mon domaine principal :brokerne.eu (installation d 'un site d ' essai sous le cms spip)

mon sous domaine zwii.brokerne.eu

y a t 'il une procédure pour installer plyr manuellement ?

Peter , tu mérites bien une crêpe

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • Contenu similaire

    • Par PeterRabbit
      Vous cherchez un player audio-vidéo qui s'adapte sans problème à ZwiiCMS et qui soit léger, polyvalent et esthétique ?
      Un petit détour sur le site de Plyr vous convaincra qu'il est bien ce qu'il affirme : "a simple, accessible HTML5 media player", un player HTML5 simple à paramétrer qui vous permettra d'intégrer facilement des vidéos (les vôtres ou celles de Youtube) ou des fichiers audio sur votre site, le tout dans un format responsive.
       
      Avertissements
      Même si le plugin a été réécrit sur la base de la version 8.29 de ZwiiCMS, le player n'a été actualisé qu'à hauteur de la version 2.0.18, faute d'être parvenu à faire accepter les codes d'intégration de la version 3 à TinyMCE. 
      Le script d'installation effectue seulement deux écritures ponctuelles dans "core/layout/main.php", mais il écrase le fichier "core/core.js.php" pour pouvoir remplacer le script qui pose problème. Faites-en une copie de sécurité si vous l'avez personnalisé.
       
      Installation
      L'archive contient deux modules :
      "plyr_install", pour installer le player. "plyr_restaure", pour remettre votre site dans son état initial s'il ne correspond pas à vos attentes.  
      Pour chacun des modules :
      Copiez la totalité de son contenu à la racine du répertoire d'installation de votre site. Acceptez les remplacements de fichiers qui vous seront proposés. Rendez-vous ensuite sur votre site ou rafraîchissez la page pour finaliser l'installation. C'est fait.
       
      Utilisation
      Collez ces lignes dans le code de vos pages (icone "<>" de la barre d'outils) en les adaptant à votre configuration et au type de vos fichiers.
       
      Audio
      <audio controls> <source src="chemin/vers/votre.mp3" type="audio/mp3"> </audio> Vidéo
      <video controls>  <source src="chemin/vers/votre video.mp4" type="video/mp4"> </video> ou, si vous avez prévu une image d'accueil 
      <video poster="chemin/vers/votre image d'accueil.jpg" controls> <source src="chemin/vers/votre video.mp4" type="video/mp4"> </video>
      Youtube
      <div data-type="youtube" data-video-id="bTqVqk7FSmY"></div>  
      Vimeo
      <div data-type="vimeo" data-video-id="143418951"></div>
      Conseils
      Utilisez le code d'intégration fourni par Youtube, Viméo, Dailymotion, etc. plutôt que de passer par Plyr. Pour en savoir plus sur Plyr et ses possibilités, consultez le fichier "readme_2.0.18.md".