Posts Tagged ‘vimeo’

Diffuser des vidéos depuis son blog

Wednesday, December 22nd, 2010

Lorsque je souhaite diffuser une vidéo familiale sur mon blog, voilà les contraintes que j’ai, par ordre d’importance :

  1. La vidéo doit rester privée : seuls les personnes qui lisent le blog doivent pouvoir accéder à la vidéo.
  2. Les personnes qui lisent le blog doivent pouvoir les télécharger.
  3. Les vidéos doivent être visibles au moyen d’un navigateur Mac ou PC. Elles doivent également être visibles sur un iPod, iPhone ou encore iPad.
  4. Du moment qu’une personne lit le blog, la vidéo doit être facilement accessible (en particulier, sans devoir taper un mot de passe).
  5. Bonne qualité.

Première solution : vimeo, compte standard

Ma première solution était d’utiliser un compte vimeo gratuit. Je trouvais la qualité de leur encodage et le look général du site et du lecteur de vidéos me convenait parfaitement (largement plus que YouTube). Les quotas me suffisaient.

Cette solutions présentait cependant deux défauts :

  • Les vidéos ne sont pas visibles sur un iPhone ou iPad (contrainte 3).
  • La seule façon de rendre les vidéos privées était de les protéger avec un mot de passe (contrainte 4).
  • Pour télécharger une vidéo, la personne intéressée doit créer/avoir un compte vimeo.

Deuxième solution : vimeo, compte plus

J’ai donc récemment opté pour une autre solution : payer pour un compte vimeo plus. Cette solution était censée me permettre de régler beaucoup plus finement l’intimité (privacy) de mes vidéos (contrainte 1). De plus, les vidéos d’un compte vimeo plus devenaient accessibles depuis un iPhone ou un iPad (contrainte 3).

Cependant, malgré une plus grande possibilité d’ajustement de l’intimité, je ne suis pas parvenu à une solution qui me convenait.

Le compromis à faire était le suivant :

  • Soit je cache les vidéos du site vimeo et elles sont visibles depuis les domaines que je spécifie. Mais alors, comme elles n’apparaissent plus sur le site vimeo, elles ne sont plus téléchargeables.
  • Soit je les protège par mot de passe, mais du coup, je n’améliore guère la situation par rapport à la solution initiale.
  • Soit je les laisse visibles depuis vimeo. Finalement, seules les personnes qui nous connaissent seraient susceptibles de venir voir mes vidéos, non ? NON !

Voilà ce qu’il s’est passé : lorsque j’ai acheté un compte vimeo plus, j’en ai recréé un complet et j’ai choisi d’y re-transférer toutes mes vidéos (le but : bénéficier d’un encodage à deux passes proposé aux membres vimeo plus). J’ai donc utilisé pour la première fois leur logiciel vimeo uploader (qui est très pratique). Au bout de quelques jours de transfert, la dizaine de gigas de vidéos que j’ai s’est correctement retrouvé sur mon compte vimeo.

Par contre, il y a un réglage que je n’avais pas modifié et toutes les vidéos transférées sur mon compte vimeo étaient publiques par défaut. Et ce que j’ai vu m’a fait froid dans le dos :

Ce compte vimeo venait d’être créé, les vidéos s’y trouvaient depuis à peine quelques jours. Elles n’étaient pas encore en lien avec mes blogs. La seule façon de les voir était donc de “tomber dessus” depuis le site vimeo.

Et bien je trouve effrayant de constater que les vidéos les plus vues sont celles où l’on voit des enfants nus. Si je pouvais encore en douter, je suis convaincu maintenant de deux choses : le net fourmille de pervers; l’intimité de mes vidéos est une contrainte qui n’accepte aucun compromis.

Troisième solution : héberger moi-même

J’ai donc finalement opté pour héberger mes vidéos moi-même, c’est-à-dire chez mon fournisseur (bluehost.com pour ne pas le citer). Comme je n’ai pas de limite d’espace disque ni de transfert de données, ce n’est pas un problème majeur.

J’utilise donc maintenant le lecteur VideoJS (un lecteur libre très complet) et le plugin WordPress qui va avec. C’est un lecteur HTML5 (donc compatible avec l’iPhone et l’iPad), mais capable de se rabattre sur un lecteur flash.

Pour faire fonctionner le tout, voilà comment je procède :

Conversion de la vidéo

C’est actuellement la jungle : chaque navigateur internet support différents formats d’encodage vidéo. Voici un extrait d’une page très complète sur le sujet.

Pour me simplifier la vie, je ne propose la vidéo qu’au format mp4. Pour les navigateurs qui ne supportent pas ce codec, le lecteur se rabattera sur un lecteur flash, ce qui me convient très bien.

Cependant, le format mp4, c’est vague et pour que les vidéos puissent être visionnées sur un iPhone, le format doit être limité et le profil judicieusement choisi.

VideoJS présente d’ailleurs une petite lacune à ce niveau-là : il n’est pas possible de proposer plusieurs encodages mp4, par exemple une première version en bonne résolution pour une visualisation à partir d’un poste fixe, et une autre version en basse résolution pour une visualisation à partir d’un smartphone.

Toujours est-il que j’ai opté pour les réglages d’exportation suivants avec QuickTime :

  • Débit 512 kbits/s (à mon avis un compromis acceptable entre la taille du fichier et la qualité)
  • Taille de l’image : 640×360 (pour du 16:9 évidemment). 640, c’est la taille maximale supportée par un iPhone 3.
  • Profil de base (bouton Options vidéo...)
  • 96 kbps pour l’audio

Téléchargement de la vidéo

Au sein de l’arborescence créée par WordPress, il y a le répertoire wp-content/uploads/. J’y ai créé un répertoire videos/ dans lequel je transfert toutes mes vidéos.

Attention : avec mon hébergeur (peut-être le vôtre aussi), si le nom de fichier contient des accents, il sera introuvable depuis un lien externe.

Intégration dans une page WordPress

Grâce au plugin WordPress pour VideoJS, l’intégratoin au sein d’une page WordPress est très simple. Il suffit de mettre la balise suivante :

[video mp4="http://adresse_blog/wp-content/uploads/videos/video.mp4" preload="false" width="450" height="253"]

Les possibilités de réglages sont bien plus vastes que celles que j’utilise ici : il est possible de définir plusieurs formats de vidéo, de spécifier une image, etc.

En conclusion

Cette dernière solution n’est pas encore parfaite, mais elle me convient mieux que toutes les autres :

  1. La vidéo est privée : elle n’est accessible que depuis le blog. Elle n’apparaît nulle part ailleurs. Si en plus le blog n’est pas référencé, le niveau d’intimité obtenu me convient parfaitement.
  2. En ajoutant un lien vers le fichier mp4, les personnes qui le souhaitent peuvent télécharger la vidéo (sans même avoir un compte vimeo). Elle sera évidemment dans une résolution plus faible que l’originale.
  3. Les vidéos sont visibles sur un iPhone et un iPad. Certes la résolution pourrait être améliorée pour un iPhone 4 et un iPad, mais pour l’instant, c’est une limitation de VideoJS.
  4. Les vidéos sont facilement visionnable, sans avoir à introduire à chaque fois un mot de passe.
  5. C’est moi qui décide de la qualité et du compromis que je souhaite faire.

En tous les cas, c’est un très beau boulot que l’équipe qui développe VideoJS nous met à disposition. En plus, ils sont très actifs sur leur forum de support.

Vimeo, iframe et WordPress

Monday, November 1st, 2010

Maintenant que vimeo supporte l’HTML5 pour ses vidéos, il serait dommage de ne pas utiliser cette nouvelle fonctionnalité pour diffuser des vidéos sur un blogue WordPress, d’autant plus que cela permet de voir ces vidéos sur les iPods, iPhones et autres iPads.

Le problème, c’est que l’intégration de vidéos vimeo se fait au moyen d’une balise <iframe> et que pour des raisons de sécurité, WordPress la supprime.

Pour résoudre ce problème, il faut passer par l’usage d’une extension (plugin). En l’occurence, j’utilise l’extension suivante : insereIframe.

Elle a l’avantage de rendre simple la modification du code d’intégration fourni par vimeo. Par exemple, le code d’intégration suivant :

<iframe
src="http://player.vimeo.com/video/16366056?byline=0&amp;portrait=0"
width="450" height="360" frameborder="0"></iframe>

devient :

[iframe:
src="http://player.vimeo.com/video/16366056?byline=0&amp;portrait=0"
width="450" height="360" frameborder="0"]

Mise à jour

Je n’utilise plus vimeo pour diffuser mes vidéos, mais un lecteur libre, VideoJS.