29 juil. 2010

Mettre en ligne une vidéo dans une vidéoBox

Encore un joli effet de lightbox et ce n'est pas très difficile à réaliser.
Attendez que la page et tous les fichiers se chargent et faîtes le test :




Cliquez pour voir la vidéo

Si votre blog est sur OverBlog, vous pouvez utiliser les adresses de mes fichiers. Vous devez seulement changer l'adresse de votre vidéo

Première étape :

Allez sur VidéoBox

Cliquez sur Download VideoBox 1.1

Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire vers.

Deuxième étape :

Dans l'administration de votre blog - Mes documents - Autres Fichiers :
  • vous créez un répertoire videobox

    • dans ce répertoire, vous enregistrez les fichiers

      • closelabel.gif
      • loading.gif
    • vous notez leur adresse
Troisième étape :

Sur votre PC :
  • vous ouvrez le bloc-note
  • vous appelez le fichier videobox.css
  • vous modifiez les chemins des images en les remplaçant par les nouvelles adresses (2ème étape)
  • vous enregistrez le fichier sous le même nom
Quatrième étape :

Dans votre administration - Mes documents - autres fichiers - videobox :
  • vous enregistrez les fichiers suivants :

    • flvplayer.swf
    • swfobject.js
    • videbox.css
    • videobox.js
  • vous notez leur adresse
Cinquième étape :

Lors de l'installation de la vidéo, vous collez en HTML
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/mootools.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/swfobject.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/videobox.js"></script>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/videobox.css" type="text/css" media="screen" />
<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">Cliquez pour voir la vidéo</a>

En rouge, les fichiers enregistrés à l'étape 4
En bleu, l'adresse de la vidéo . On trouve cette adresse sur YouTube dans la barre de menu du navigateur

Aucun commentaire:

Enregistrer un commentaire

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)