Vimeo est un site web communautaire destiné au partage et au visionnage de vidéos faites par les utilisateurs selon Wikipedia. Un de ses avantages est l’absence de publicité sur les vidéos. Il propose lecteur universel. C’est lui que nous allons utiliser dans un modèle SPIP.
Pour mieux comprendre le modèle SPIP contenant le lecteur universel de Vimeo personnalisable, nous allons d’abord voir quelques informations fournies par Vimeo.
Voici l’exemple du lecteur embarqué universel donné par vimeo :
Ci-dessous, la liste des paramètres que l’on peut passer dans l’url de l’iframe.
autopause | Active ou désactive la pause d’une vidéo lorsqu’une autre est joué. 1 par défaut. |
autoplay | Lance automatiquement la lecture de la vidéo au chargement de la page. 0 par défaut. Notez que cela ne marche pas sur tous les appareils. |
badge | Active ou désative le badge sur la vidéo. 1 par défaut. |
byline | Affiche ou pas la ligne avec le nom de l’utilisateur vimeo. 1 par défaut. |
color | Spécifie la couleur des buttons de control de la vidéo. 00adef par defaut. Prenez soin de ne pas inclure le #. |
loop | Rejouez la video lorsqu’elle arrive à la fin. 0 par défaut. |
player_id | Un id unique pour le lecteur qui est à utiliser avec l’API javascript. |
portrait | Affiche ou pas le portrait de l’utilisateur. 1 par défaut. |
title | Affiche le titre de la vidéo. 1 par défaut. |
Et voici donc le modèle SPIP :
On met ce code dans un fichier HTML que l’on appelle lecteur_vimeo.html et que l’on glisse dans le répertoire modeles de squelettes.
Et maintenant, un peu de css pour la mise en forme en responsive design :
C’est une mise en forme responsive design que j’ai trouvé sur internet il y a quelques temps, mais je ne retrouve plus la source... Mais, ça marche ! C’est le principal !
On initialise les valeurs par défaut des différents paramètres.
Ici, vous pouvez changer les valeurs d’initialisation pour obtenir par défaut des lecteurs à votre convenance. En ce qui concerne la largeur, j’ai mis la largeur maximum qu’aura une vidéo pour occuper 100% de la largeur de mon site personnel lorsque celui-ci est le plus large... La hauteur en découle. Ensuite, le reste dépend de vous... Il est évidemment conseillé de mettre une couleur qui colle à celle de votre charte graphique. En ce qui concerne les autres paramètres, à vous de voir... Cela dépend vraiment. Personnellement, comme les vidéos que je mets sur mon site sont souvent les miennes, je ne mets, par défaut, ni le portrait, ni le nom de l’utilisateur... Par contre, lorsque les vidéos ne sont pas de moi, je les ajoute.
On remplace les valeurs initiales des différentes valeurs si on passe de nouvelles valeurs par l’intermédiaire des paramètres adéquats lors de l’appel du modèle...
Cette partie mérite peut être quelque explications ! Par exemple, que fait exactement cette ligne de code :
Tout d’abord #SET{width,xxx}
permet d’attribuer la valeur "xxx" à la variable width.
Ensuite [(#GET{width})]
permet de récupérer la valeur de la variable "width".
[(#ENV{width,yyy})]
récupère la valeur du paramètre "width" passé en argument au modèle. "yyy" est la valeur par défaut si on ne passe par le paramètre "width" en argument.
veut donc dire : je donne à la variable "width" la valeur de "width" passé en argument au modèle, sinon, je lui donne la valeur de la variable "width" attribuée dans la partie "Initialisation" ! Je ne suis pas sûr d’être très clair là !!!
Tout d’abord, il vous faut l’id de la vidéo. C’est simple, rendez-vous sur une vidéo et regardez son url. A la fin, il y a un chiffre. C’est l’identifiant de la vidéo.
Voici l’intégration basique de ce lecteur dans un article et le résultat en dessous :
Et maintenant, avec le portrait et le titre.
Pour l’équivalent dans un squelette, on mettra :
et
Attention ! Si le propriétaire est un Plus Member, certains de ses paramètres seront prioritaires. Ce qui veut dire que vous n’aurez pas la main dessus.
Voilà, c’est fini ! Vous avez tous les éléments pour intégrer facilement le lecteur universel de vimeo !
Nos services s'articulent autour des thèmes suivants :
Artaban est une agence web qui s'appuie sur une petite équipe pluridisciplinaire. Nous sommes des artisans alliant souplesse, compétence et savoir-faire.
2023 © Artaban. Mentions légales