Videolink : un plugin javascript vidéo novateur pour html5

Html 5 commence à pointer le bout de son nez avec son lot de nouveautés et d'innovations. Il laisse rêveur puisqu'il permet de faire un bond en avant au niveau graphique, fonctionnel et sémantique. Grâce à cette nouvelle version, il existe notamment une balise permettant de se passer de flash pour lire les vidéos : la balise <vidéo> (pour les navigateurs compatibles). Et maintenant, il y a Videolink : un petit plugin javascript pour naviguer et chapitrer de manière sémantique une vidéo html5. Dans cet article :» » » » » » » » » » Qu'est ce que Videolink ? Après en avoir parlé pas mal avec son créateur (et ami) @willybahuaud, on a eu du mal à définir de manière précise ce que faisait le plugin. Après quelques bières et pas mal de chips, nous en sommes arrivés à une définition simple mais claire : Vidéolink, c'est un plugin javascript vidéo pour Html5, qui vous permet de naviguer et chapitrer vos vidéos de manière dynamique. Mais mieux vaut une page de démonstration pour comprendre : DémonstrationVideolink Et vous comprendrez très vite l'intérêt : vous pouvez insérer dans vos articles des liens pour un accès direct à des portions de votre vidéo, le tout de manière très propre (une simple balise a href) et dynamique pour vos visiteurs. On peut donc baliser de manière sémantique un contenu vidéo, sous forme de chapitres. Html5 et vidéo Tout d'abord, petit cour de rattrapage sur l'HTML5 et la vidéo avant de vous expliquer ce que peut apporter Videolink. La nouvelle balise vidéo d'html permet aux développeurs d'insérer leurs créations directement dans n'importe quelle page, sans plugin installé sur le navigateur (flash, quicktime, ...) La balise vidéo Le code est simple comme bonjour : Code block  <video src=mavideo.ogv width=500 height=400 controls poster=mavideo.jpg> Texte de remplacement </video> Bien entendu, il faut avoir un navigateur compatible (Firefox, Chrome, Safari, ...), sinon le texte de remplacement sera affiché. Vous pouvez donc placer à la place du texte de remplacement vos balises objects qui sont utilisées pour l'HTML4. Faute d'accords entre les navigateurs, le html 5 n'a pas d'encodage défini. Les vidéos doivent être encodées en Ogg Theora (pour la plupart des navigateurs), H.264 (pour Safari notamment), MP4 ou WebM, ce qui obligera à utiliser plusieurs encodages différents pour que les vidéos soient lisibles sur tous les navigateurs : Code block  <video width=500 height=400 controls poster=mavideo.jpg> <source src=mavideo.ogv type=video/ogg> <source src=mavideo.mp4 type=video/mp4> <source src=mavideo.mp4 type=video/avi> Texte de remplacement </video> Vidéo, SEO et utilisation Cela représente déjà un pas en avant pour le SEO, puisque le code est plus propre, plus logique et moins lourd à charger. Au delà du référencement naturel, la balise vidéo a plusieurs atouts : La vidéo html 5 permet même de faire interagir votre vidéo avec le reste de votre page, comme ici : OpenVideoDemo Un exemple des possibilités techniques d'HTML 5 et de la vidéo Les vidéos en html 5 vont aussi résoudre d'autres problèmes, telles que les superpositions entre des éléments flash et des éléments css/html. Même si ce n'est pas encore supporté par tous les navigateurs non plus, on pourra aussi naviguer via le clavier dans une vidéo. C'est un énorme plus pour l'accessibilité des sites Internet. Mais la question est de savoir où et comment naviguer. C'est là que le javascript Videolink intervient. Fonctionnement de Videolink Comme je l'ai dit, Videolink permet de chapitrer et de naviguer dans des vidéos, ou dans un ensemble de vidéo. Dans la démo, on peut voir qu'un simple lien texte permet de se déplacer dans une vidéo (aller à la 5ème minute), ou de charger une autre vidéo à un instant précis. Le code utilisé est tout simple très propre. Pour charger une nouvelle vidéo : Code block  <a href="http://www.monsite.net/mavideo.ogg" rel="player" class="videolink">xxx</a> Pour charger un instant T d'une vidéo en cours : Code block  <a href="#50" title="aller à la cinquantième seconde" rel="player" class="videolink">xxx</a> Pour charger un instant T d'une autre vidéo : Code block  <a href="http://www.monsite.net/mavideo.ogg#25" rel="player" class="videolink"> Il faut donc ajouter à vos liens : la classe videolink un rel correspondant à l'ID de la balise video ciblée. pour le href, placez l'url absolue de la vidéo avec/ou une ancre correspondant à la seconde où on veut aller. Pourquoi j'aime Videolink pour les vidéos et le SEO Un code propre signifie un code qui peut être facilement compréhensible pour les moteurs de recherche. On peut donc très bien imaginer de pouvoir référencer des sections différentes d'une vidéo dans les années à venir avec un tel script. Le poids est également tout petit (1,2kb en version minifié, ou 3kb en version normale). Autant dire que ca ne pèse rien, surtout si vous l'incluez (comme il se doit) dans un JS unique et global sur votre site. Le plugin javascript est simple à installer et à mettre en place. Videolink est donc ergonomique, et seo-friendly. Bien entendu, aucun moteur de recherche ne prend en compte ce genre de lien pour le moment, encore plus pour la partie #nombre-de-seconde. Mais le potentiel pour le référencement naturel des vidéos dans les années à venir est tout simplement énorme. VideoLink, un excellent javascript pour HTML 5 Je prends un exemple de l'utilité de Videolink pour l'HTML 5 vidéo : dans un de mes articles sur le référencement naturel et l'évolution de Google, j'ai placé une vidéo de Matt Cutts. Dans cette vidéo, il répond à deux questions très différentes sur le SEO. Le script Videolink me permettrait donc de scinder la vidéo en deux pour mes lecteurs, qui n'auraient qu'à cliquer sur un lien pour charger la partie correspondante, sans que je ne doive découper ma vidéo en deux dans un logiciel, les compresser puis les remettre sur un serveur... Et le tout pourrait ensuite être référencé par les moteurs de recherche. Pourquoi utiliser Videolink ? Les qualités Je l'ai dit tout au long de l'article : Videolink, c'est de la bombe ! Très ergonomique pour les utilisateurs : pour naviguer dans une ou plusieurs vidéos le long d'un article Un code propre et léger Simple à installer Pas besoin de charger une librairie supplémentaire comme Jquery ou Mootools Une sémantique parfaite, qui laisse présager de bon résultats SEO (ou du moins, c'est possible). Les applications qui peuvent en découler sont nombreuses, notamment en ce qui concerne les webtv ainsi que tout site incluant de la vidéo. Les défauts Mais aucun plugin javascript n'est parfait. Même si c'est un ami qui l'a conçu, il possède quelques défauts. Il ne support qu'un format de vidéo à la fois, ce qui nous donne : pour des vidéos en Ogg, ce sera supporté par Firefox 3+, Chrome et Opéra 10+ pour des vidéos H264, ce sera uniquement pour Safari pour des vidéos webM, le plugin sera pour Firefox 3.5+, Chrome, Opéra, Safari bientôt et IE9 (s'il tient ses promesses) Il met plus ou moins de temps à charger une portion de la vidéo (le meilleur navigateur est Chrome pour le moment). Autrement dit, le principale problème du plugin est qu'il se base sur Html 5 qui n'est pas encore finalisé sur tous les navigateurs (comme Internet Explorer), et que les développeurs ne se sont toujours pas mis d'accord sur un format de vidéo unique... Pour le moment, optez plutôt pour le Ogg, en attendant que le WebM se décante un peu. ;) Pour pallier le défaut, rien de tel qu'un autre javascript avec un regex sur la classe Videolink, ce qui fera disparaître le lien selon les navigateurs choisis. Où trouver Vidéolink Vous pourrez trouver ce plugin sur le site Wuiwui.net : Videolink Le plugin est distribué sous licence Creative Commons "Paternité" : vous êtes donc libre de reproduire, distribuer, communiqué et modifier le plugin, tant que vous en attribuez la paternité à son créateur. Sources : Introduction à Html 5 (Dev.Opera)