Tag

YouTube

Browsing

Movgrab est un outil en ligne de commande écrit en C (sans dépendances) qui permet de récupérer facilement des vidéos sur des sites comme YouTube, DailyMotion, Vimeo, Blip.tv, Liveleak, Guardian...

movgrab-download-videos-shell

Il permet de choisir les flux disponibles sur les pages vidéo, supporte les proxies, peut reprendre des téléchargements... c'est une application très utile.

Liste des sites supportés par movgrab

Movgrab fonctionne avec:

[one_half]

  • YouTube
  • Metacafe
  • Dailymotion
  • Vimeo
  • Break.com
  • eHow
  • 5min.com
  • vbox7
  • blip.tv
  • Ted
  • MyVideo
  • ClipShack
  • MyTopClip
  • RedBalcony
  • Mobando
  • Yale University
  • Princeton University
  • Reuters
  • LiveLeak
  • Academic Earth
  • Photobucket
  • VideoEmo
  • VideosFacebook

[/one_half]

[one_half_last]

  • Aljazeera
  • Mefeedia
  • IViewTube
  • Washington Post
  • CBS News
  • Euro News
  • MetaTube
  • MotionFeeds
  • Escapist
  • Guardian
  • RedOrbit
  • Sciive
  • Izlese
  • uctv.tv
  • royalsociety.tv
  • British Academy
  • Kitp
  • Dotsub
  • Astronomy.com
  • Teachertube.com
  • Discovery
  • Bloomberg.com

[/one_half_last]

Allez, je continue ma petite série sur la gestion de l'intégration oEmbed sous WordPress.

WordPress gère nativement plusieurs services : copiez-collez l'adresse d'une vidéo YouTube dans un article et hop, vous obtenez une vidéo entièrement intégrée, avec un code plutôt propre mais pas entièrement valide.

oembed-all-service

Je vous propose donc de valider le code généré par WordPress lorsqu'il vient de sites tiers comme YouTube, DailyMotion, Vimeo ou SlideShare.

Valider le code oEmbed de YouTube

Il suffit de lancer les quatre requêtes SQL suivantes :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");

Valider le code oEmbed de Dailymotion

Pour le code de Dailymotion, ces deux requêtes suffisent :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');

Valider le code oEmbed de Vimeo

Quatre requêtes pour Vimeo :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');

Valider le code oEmbed de SlideShare

Et deux requêtes pour SlideShare :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');

Et voilà, le code est plus propre, plus valide et utilise CSS plutôt que des balises propriétaires.

Le code des plateformes - vidéos ou autre - évolue et il n'est pas rare de tomber sur de vieux articles qui embarquent un vieux code embed pour afficher des vidéos.

Si votre site a quelques années, il y a plusieurs méthodes d'intégration - plus ou moins optimisées - dont certaines ne s'afficheront pas (celles utilisant le plugin Flash par exemple) sur une tablette ou un smartphone.

youtubeSur SkyMinds, je me suis dit que ce serait sympa d'avoir un système unifié : toutes les vidéos YouTube seront automatiquement insérées par WordPress en utilisant la méthode native, à savoir oEmbed.

Pour ce faire, j'utilise le plugin Search Regex qui permet d'intervenir facilement sur la base de données pour effectuer des changements en masse, tout en proposant la visualisation des changements avant que ces derniers ne soient appliqués.

Toutes les manipulations sont à effectuer avec Search Regex, en activant la case regex. Je me sers du signe dièse (#) comme délimiteur pour les expressions régulières.

Remplacer le vieux code d'intégration flash de YouTube

Avec Search Regex, on cherche :

#(.*)#

Et on remplace par :

https://www.youtube.com/watch?v=$2

Wordpress iconPour les besoins du CKYF, j'ai écrit une fonction qui doit afficher une vidéo automatiquement. Or je voulais juste renvoyer un shortcode vidéo qui prendrait en charge toute la partie code du lecteur vidéo.

On ne peut pas juste renvoyer la valeur, il faut utiliser la fonction do_shortcode() de WordPress.

Cas 1 : exécuter un shortcode dans une fonction

La solution réside dans l'utilisation de la fonction do_shortcode(). Voici un petit exemple :

Cet exemple exécute le shortcode .

Le problème : le code des vidéos n'est pas valide en HTML5

Voici ce que le code oEmbed de WordPress donne par défaut avec un lien Youtube :

Or le petit problème, c'est que tout cela n'est pas vraiment valide au niveau W3C et je commence à me lasser de voir ces erreurs de validation sur toutes les pages du site avec des vidéos :

Erreur 1 : Attribute allowfullscreen not allowed on element iframe at this point.
Erreur 2 : The frameborder attribute on the iframe element is obsolete. Use CSS instead.

La solution : filtrer le rendu oEmbed de WordPress pour purifier le code

Voici donc la solution que j'ai mise en place sur le site : je filtre le code oEmbed de WordPress de manière à retirer le tag allowfullscreen qui n'a rien à faire là et à supprimer l'attribut frameborder, que je remplace par un style="border: none" :

  1. éditez le fichier functions.php de votre thème
  2. ajoutez-y cette fonction :
  3. enregistrez le fichier.

Notez que WordPress cache les résultats oEmbed dans la table postmeta donc après avoir installé ce code et si vous voulez vérifier que cela fonctionne, éditez un article pour que le postmeta se mette à jour.

Voilà, vos pages avec vidéos YouTube devraient maitenant être valides.

Youtube : Staff Room EditionDécidément, j'ai l'impression que de plus en plus de gens découvrent YouTube en ce moment. Surtout dans la salle des profs.

Inconfortablement avachi sur l'un des sièges portant au moins autant de signes que nous en cette fin de trimestre et attendant que la cloche sonne pour délivrer quelques notions culturelles à nos chers élèves, je surprends une conversation entre une prof de français et le responsable TICE :

FR-chick : Pour mon IDD, j'ai besoin d'aller sur un site qui s'appelle YouTube !!! (prononcé iu-tube, à la française)
TICE-man : Ah oui mais tu comprends, on est derrière un serveur SLIS, c'est pas nous qui gérons les exceptions... (blah... blah...).
FR-chick : En plus on trouve des vidéos porno là-dessus !

YoutubeContrairement à ce que l'on pourrait croire, il n'y a pas que les élèves qui nous sortent des perles. Et oui, les profs aussi sont de gros producteurs - et elles valent souvent largement celles de nos chers élèves...

J'en veux pour preuve ce petit dialogue que j'ai eu récemment avec un collègue d'histoire-géographie, au détour d'une conversation portant sur le P2P et les méthodes modernes d'échange de fichiers sur Internet - dont je suis quasi-certain qu'il n'a pas saisi un mot au demeurant ! - :

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :