Videolink est un plugin javascript

qui simplifie les interactions entre vos contenus textes et vidéos. En utilisant la balise vidéo d'HTML5 et des liens, Videoplugin charge dynamiquement vos vidéos, avance la lecture à un instant précis, ouvre une vidéo à la frame voulue...

L'intérêt du plugin

est de profiter des possibilités offertes par l'html5 pour rapprocher plus encore la vidéo des autres contenus web. Pour l'utilisateur, cela lui permet de parcourir un texte, et d'un simple clic, de voir apparaître la vidéo qui correpond à ce qu'il est en train de lire.
La vidéo n'est plus un citoyen de seconde classe du web, un contenu fermé dont les seules interactions possibles se faisaient par l'intermédiaire des boutons du player.
Avant, pour montrer plusieurs vidéos sur un site, il fallait autant de players que de vidéos. Niveau ergonomie et arrangement de la page, c'était plutôt compliqué... avec Videolink, une seule balise vidéo suffit (mais il est quand même possible d'en utiliser plusieurs).

Pour utiliser Videolink

, il faut tout d'abord avoir une page web déclarée en html5. Votre doctype doit être :

<!DOCTYPE HTML>

Une fois ce prérequis, il faut insérer le script Videolink, avant la fermeture de la balise body :

<script src="videolink-1.0.js" type="text/javascript"></script>

Maintenant, il faut inclure dans votre page une balise vidéo, avec une source par défaut (celle qui se chargera en même temps que la page), un identifiant, ainsi que les options que vous souhaitez :

<video id="player" src="http://www.mondomain.com/mavideo.ogg" autoplay="true" width="320" height="240px" controls loop>Texte à afficher si le navigateur ne prend pas en charge la balise vidéo</video>

Il ne vous reste plus qu'à concevoir vos liens. Ceux-ci doivent avoir en attribut "rel" l'identifiant de la balise ciblée, la classe "videolink", en attribut href l'url absolue de la vidéo que vous voulez charger, ou bien une ancre correspondant à la seconde à laquelle vous voulez aller, ou bien les deux...

Par exemple :

  • pour charger une vidéo :
    <a class="videolink" rel="player" href="http://www.mondomaine.com/video.ogg">un lien pour charger une vidéo</a>
  • pour aller à une seconde précise :
    <a class="videolink" rel="player" href="#25">un lien pour aller à la 25ème seconde</a>
  • pour charger une vidéo à un instant voulu :
    <a class="videolink" rel="player" href="http://www.mondomaine.com/video.ogg#25">un lien pour charger ma vidéo à la 25ème seconde</a>

Commentaires

Questions

Bugs

  1. Daniel, de SeoMix

    Un plugin indispensable pour tout site souhaitant utiliser la vidéo à bon escient, et plus particulièrement les Webtv.

    C'est vraiment bien pensé, pratique, léger et simple à utiliser et installer. Bravo. 😉

  2. Jonas

    Un grand merci pour ce script.

    Je pense notamment au montage d'un site Html basé sur le principe de la vidéo interactive (genre Flash) mais...sans flash. Imaginons un site se mouvant et changeant au gré des clics sur des liens, comme Flash, mais où c'est la vidéo qui forme le background du site. Hormis le poids, je vois pas d'obstacles à premières vues. A tester.

    En tout cas, bravo !!

  3. leglaude51

    Bonjour et bravo!
    Ce plugin est-il pour wordpress ou uniquement pour un site en html5?
    Mon site fait de la vidéo streaming, et est-il possible d'utiliser ce plugin?

    Et maintenant, comment convertir un DVD en OGG ou wmp?

    Merci d'avance et meilleurs salutations
    Leglaude

  4. willy

    Bonjour,
    Ce plugin n'est pas spécialement conçu pour wordpress, il marche sur n'importe quelle page html5.
    Vous pouvez tout à fait utiliser ce plugin sur votre site, si vos vidéos sont en html5 (si c'est du streaming flash, c'est mort...).Le but de ce plugin c'est d'avancer dans le domaine de la vidéo web en mettant de côté flash, car c'est bien connu : flash, c'est le mal ! ^^

    Pour convertir des DVD (c'est pas bien !) en OGG, je te conseil d'utiliser les fonctions avancé de VLC, ou bien un programme qui s'appelle "Super Super"

  5. leglaude51

    Bonsoir,
    Attention!!!
    Le streaming est autorisé en SUISSE, pour autant que l''internaute ne puisse pas télécharger le Film!
    Ce qui devient de plus en plus dur avec les logiciels qui sont sur le Net.
    Mes dvd sont en DivX, mais j'aimerai les mettre en ogg, et créer des pages en html5.
    Donc, si ce n'est pas un plugin pour wordpress, rien ne m'empêche de faire des pages html5 hors du dossier WP.
    Pourquoi tu dis que flash c'est le mal? Pourtant tous les sites web l'utilise, depuis allociné, youtube, etc...
    Bon, je vais essayer Super Super et VLC.
    Merci pour les infos et salutations.
    Leglaude

  6. willy

    Bonsoir,

    Je ne savais pas pour la Suisse, c'est bon à savoir...
    Je dis que flash c'est le mal simplement parce que que c'est un langage propriétaire (et tout ce qui va avec(pas moyen de l'amélioré, cout du logiciel, limitations, pb référencement...)). Allociné, youtube et tous l'utilise parce qu'il à longtemps été la seule solution viable et portable sur tous les navigateur de puis ie6.

    Aujourd'hui je pense que cela peut changer...

    J'suis peut être un peu fleur bleu dans l'âme, mais si ce logiciel m'a permit de faire beacoup de chose, j'éspère qu'il sera rapidement remplacer par quelque chose de "libre".

    Je pense qu'avec vlc ou super super tu trouveras ton bonheur.

  7. Boris

    Bonjour,

    Cela ne marche pas chez moi... Le chargement d'une nouvelle vidéo ne se fait pas seul le déplacement de 25sec s'effectue.

    Une idée du souci ?

    Pour pallié certain question, il n'y a sur la page que le code présenté plus ainsi que les mêmes vidéos et les liens sont bons ;).

  8. Stanley

    Salut,
    J'aimerais savoir comment faire rouler un script avant que le video affiche. exemple: quand vous allez sur Youtube pour regarder une video, une publicite s'est affiche avant que le video commence,

  9. willy

    Bonjour,
    @hus videloink est un script utilisant l'HTML5, qui n'est malheureusement pas pris en charge par internet explorer...

  10. hus

    Bonjour,

    Dommage parce que le chargement des vidéos étaient rapide sans utiliser d'hébergement streaming :(
    Qu'est ce que je pourrais utilisé comme player qui soient pris en charge par tout les navigateurs ?

    Encore merci pour les réponses rapide 😉

  11. web maroc

    merci pour le script

  12. sam

    merci pour le script mais j'aimerais savoir si la video marche avec internet ou pas?

  13. Richer

    super realisation.
    y aurait-il moyen de coupler les videos OGV et mp4
    et de proposer un "flash fallback" ?

Leave a comment