Modification de l’intégration d’une vidéo (Youtube en particulier)

Dans un article précédent, j’évoquais rapidement le problème des requêtes vers des sites externes pour charger des contenus tels que polices d’écriture, scripts JS, et autres. Je faisais donc remarquer que l’intégration d’une vidéo Youtube dans un article rentrait dans ce cas, et qu’il ne semblait pas y avoir beaucoup de solutions.

Après y avoir réfléchi plusieurs fois depuis, j’ai trouvé une solution qui me convient. Plutôt que d’intégrer toute la vidéo via le mécanisme automatique de WordPress et ainsi obliger les visiteurs à récupérer du script JavaScript sur les serveurs Youtube, j’ai décidé de remplacer le lecteur intégré par une simple image comportant un lien vers la vidéo que je souhaite partager. Ainsi, plus de requête vers les serveurs Youtube de Google, je récupère l’image de la vidéo et la stocke directement sur mon serveur. Ajoutons à cela que si le visiteur souhaite visionner la vidéo, celui-ci sera donc rediriger vers Youtube, mais si celui-ci a bloqué la transmission de l’information referer (le site d’origine sur lequel vous avez cliqué sur le lien), Youtube ne sera pas en mesure de faire le lien entre votre lecture de l’article intégrant la vidéo et le visionnage de celle-ci.

Passons à la pratique. Si je désire intégrer à cet article le clip pour Towers de Bon Iver, découvert par hasard l’an dernier et dont l’url est :

https://www.youtube.com/watch?v=t60roHM1t7o

À l’aide de la console Firefox, j’ai déterminé l’url à appeler pour récupérer l’image de présentation d’une vidéo Youtube, à savoir :

https://i.ytimg.com/vi/<id-vidéo>/maxresdefault.jpg

<id-vidéo> correspond à l’identifiant Youtube de la vidéo présent dans le paramètre v de l’url de la vidéo, à savoir ici t60roHM1t7o, ce qui nous donne donc :

https://i.ytimg.com/vi/t60roHM1t7o/maxresdefault.jpg

Si ce lien ne permet pas de récupérer la miniature de la vidéo, on peut se tourner vers :

https://i.ytimg.com/vi/<id-vidéo>/hqdefault.jpg

Illustration avec la miniature du court métrage Sintel de la Blender Foundation :

https://i.ytimg.com/vi/eRsGyueVLvQ/hqdefault.jpg

Je récupère donc l’image, l’ajoute à la bibliothèque de médias WordPress et l’insère dans l’article. Après avoir trouvé une taille d’affichage correcte, j’édite les paramètres WordPress de l’image dans l’article et en particulier le champ « Légende » qui contiendra « Lien vers la vidéo « Bon Iver – Towers » ». Je modifie également le champ « Lier à », sélectionne « Lien personnalisé » et ajoute dans le champ qui apparaît le lien vers la vidéo. Enfin, je coche « Ouvrir le lien dans un nouvel onglet ». Et voici le résultat :

Lien vers la vidéo « Bon Iver – Towers »

De cette façon, j’évite qu’un visiteur affichant la page soit forcé de charger des scripts en provenance des serveurs Youtube de Google. Seul les lecteurs souhaitant découvrir le contenu de la vidéo pourront alors cliquer sur le lien via l’image. Je laisse maintenant ceux qui le souhaitent faire l’essai du système; bonne découverte musicale !

musicForProgramming();

Je parcours la liste des brouillons et tombe sur cet article commencé en novembre 2012, il y a presque trois ans. Son contenu, un simple lien, une bête url…

Une découverte assurément.

musicForProgramming();

De quoi s’agit-il ?

D’un site regroupant une série de pistes audio visant à favoriser la concentration et à augmenter la productivité durant les sessions de programmation. Les morceaux ont une durée d’une heure en moyenne. A l’heure où j’écris ces lignes, le site en totalise 34. Plus de 34h de musique donc; de quoi occuper vos oreilles pendant un bout de temps.

Pour ma part, je trouve les mixes plutôt relaxant. Ceux-ci permettent de se couper de l’extérieur – de ce qui se passe dans le bureau – et aident à se focaliser sur le problème à traiter. Contrairement à d’autres musiques, il n’y a pas de risque de voir l’écoute musicale prendre le pas sur l’activité cognitive en cours, comme pourrait le faire une chanson à texte.

A essayer durant votre prochaine session de code ou durant tout autre activité nécessitant un certain niveau de concentration !

[Musique] Run River

Lien vers « Jon Swift – Run River »

Découvert dans le film The River Why adapté du roman du même nom de David James Duncan: Run River par Jon Swift.

Run, run river.
Carry me to my home in the ocean,
Carry me away

I know I have a home
Somewhere far and removed
Like the stars that make you feel
Like you got friends.

Stars will make you feel like you got friends.

Follow the empty valley
Past the hills
To the marshes of the estuary,
Calm and peaceful river.

In the light of the moon
With the river I do run
In the hope that one day
I will dive
Beneath the ocean,

And that this river will forever run.

[Musique] Adrian von Ziegler

En ce mois de décembre, parlons musique avec cette découverte, celle de Adrian von Ziegler, compositeur indépendant originaire de Suisse. Ces créations sont diverses et variées, celtique, métal, gothique et musique de film.

L’ensemble de ses compositions peut être écouté sur Youtube. L’artiste indique ainsi sa volonté de faire connaître sa musique et de permettre à chacun de l’écouter. Par ailleurs, il est possible de le soutenir en achetant l’un de ses albums ou même sa discographie complète, dans le format de votre choix, y compris en flac!

Lien vers « Pagan Metal – Fiudlars Song »