par willy Bahuaud
”Flash is dead, vive l'HTML5 ! Avec ce plugin javascript, vous pouvez contrôler la nouvelle balise video directement avec des liens dans le texte. De quoi faire des galeries vidéos interactives et originales...”
→ partager
→ voir les articles en rapport
→ laisser un commentaire
mots clés :
audiovisuel creative commons diffusion html5 media open source player réflexion seo videolink web tv
Videolink : du javascript pour <video>
Je viens tout juste de terminer un plugin en javascript qui permet de commander une ou plusieurs balises <video> html5 avec des liens dans un texte. Ultra-simple d'utilisation, ce plugin vous permettra, en cliquant sur un lien (image, texte...), de :
- changer de vidéo
- aller à un instant précis de la vidéo
- charger une vidéo à un instant précis
Quel est l'intérêt du plugin pour les webTVs ?
Il y a peu, Flash était la technologie incontournable de toute webTV qui se respecte, pour sa puissance sans doute, pour sa portabilité sûrement ! Que vous étiez sur PC, Mac, avec Windows ou Linux et que vous naviguiez avec Firefox, Internet Explorer, Chrome, Opéra, Safari, Konqueror... vous pouviez voir les vidéos en flash.
Avec l'arrivée de l'HTML5 et sa portabilité universelle annoncée, la perte de vitesse de flash sur les terminaux mobiles, le nouveau format de vidéo webM, tout cela semble avoir été ébranlé et Flash n'est peut être plus aujourd'hui LA technologie indispensable des webTVs.
Et tant mieux car avouons-le : au niveau de l'intégration, le pavé de code des <embed> et <object>, c'était relativement affreux !
Sans me lancer dans un descriptif détaillé de l'HTML5, je vais brièvement présenter la balise vidéo. C'est donc une balise inventée en même temps que la balise audio et qui sert à introduire dans les pages web des éléments de type vidéo relativement simplement, de la sorte :
<video src="mavideo.ogg">code exectuté si le navigateur ne supporte pas la balise</video>
Les vidéos appelées par cette balise doivent être (selon les navigateur) en ogg ou H264 pour l'instant, et à terme en webM : un format multimédia dont les codecs sont VP8 pour la vidéo et vorbis pour l'audio. Cette balise peut prendre de nombreux paramètres pour structurer son comportement (height, width, autoplay, autobuffer, loop, controls...), elle peut être stylée en CSS, se voir appliquer des filtres SVG et être pilotée via du javascript.
Le plugin Videolink, qui utilise la balise vidéo d'HTML5 et du javascript, a été conçu en pensant tout spécialement aux webTVs. En effet, je tiens particulièrement à l'idée que l'univers des webTVs devrait se démarquer de celui de l'audiovisuel. De même, il devrait proposer davantage que ce que le web nous offre actuellement. Une webTV c'est : des vidéos, des textes, des images... dommage que jusqu'à présent ces éléments n'interagissent pas ensemble.
Avec videolink, on peut par exemple concevoir une galerie vidéo où lorsque l'internaute clique sur certaines expressions du texte (correspondant à des passages du film), la vidéo s'y rende directement. Si l'article évoque une vidéo en rapport, l'utilisateur clique sur l'expression et la vidéo se charge dans le même lecteur.
Videolink libère la vidéo de la "cage" qu'était son player.
Marche à suivre pour utiliser le plugin :
1. Inclure le script
Tout simplement, avant la fermeture de la balise body, insérez :
<script src="videolink-1.0.js" type="text/javascript"></script>
Je précise que ce script ne vous sera utile seulement si vos pages sont en html5. Pour mettre vos pages en html5, remplacer votre doctype par :
<!DOCTYPE HTML>
2. Mettez en place votre balise <video>
Il faut maintenant insérer votre balise (ou vos balises...) vidéo, en lui donnant un identifiant.
Là où vos souhaitez voir votre player, mettez par exemple :
<video id="player" src="http://www.monsite.com/mavideo.ogg" height="260" width="380"><video>
Ici, "player" sera l'identifiant de la balise, "http://www.monsite.com/mavideo.ogg" l'url absolue de la vidéo, "380" la largeur du player et "260" sa hauteur.
Pour plus d'infos sur la balise vidéo, je vous invite à jeter un œil sur le tutoriel du site du zéro.
3. Les liens qui vont interagir avec votre player
La structure des liens est relativement classique. Faites les pointer vers le fichier que vous souhaitez lire et/ou vers une ancre qui correspond à la seconde où vous voulez commencer la lecture. Il faut également leur ajouter la classe "vidéolink" et en rel l'identifiant de la balise concernée.
Par exemple :
<a class="videolink" rel="player" href="http://www.wuiwui.net/video/murderer.ogg">lien 1</a> //le premier lien va lancer une autre vidéo <a class="videolink" rel="player" href="#50">lien 2</a> //le second lien va aller à la 50ème seconde <a class="videolink" rel="player" href="http://www.wuiwui.net/video/nyc_time_lapse.ogg#25">lien 3</a> //le dernier lien va lancer une vidéo, directement à la 25ème seconde
Avenir
A l'heure actuelle, l'HTML5 a encore quelques problèmes selons les navigateurs (qui ont, eux, du mal à se mettre d'accord) et je vous conseille de ne l'utiliser qu'avec du ogg et des urls absolues. Cependant dès la sortie d'Internet Explorer 9, et dès qu'Opéra aura amélioré son support du webM (plus léger et performant que le f4v), il me semble que l'on pourra l'utiliser sans problème avec celui-ci.
Le plugin est disponible sous licence Creative Commons (paternité) et peut être arrangé.
D'ailleurs pour toutes suggestions, questions, bugs... ou pour faire part de vos réalisations, n'hésitez pas à laisser un commentaire 
Un dernier mot pour dire que ce plugin est, pour moi, le premier pas vers la réalisation d'un moteur de webTV dont je vous parlerai prochainement.
