Videobox, un LightBox pour vos vidéos

22/10/2007

WebDev et Design Allez aux commentaires

Voilà qui va ravir les amoureux de LightBox !

VideoBox est son équivalent pour les vidéos. Ce plugin se base sur Mootools et sur SwfObject ...

Allez voir la démo, histoire de vous faire une idée.

Prêt ?

Installation de Videobox

On télécharge et on inclue la librairie Mootools entre les balises HTML <head> et </head> :
<script type="text/javascript" src="mootools.js"></script>
Ensuite on télécharge le plugin "SwfObject" et on inclue le fichier "swfobject.js" juste en dessous de jQuery :
<script type="text/javascript" src="swfobject.js"></script>
Puis on télécharge le plugin et on inclue le fichier "videobox.js" juste en dessous de "SwfObject" :
<script type="text/javascript" src="videobox.js"></script>
On inclue ensuite le fichier "videobox.css" pour la mise en forme :
<style type="text/css" media="screen">
@import url(videobox.css);
</style>
Et n'oubliez pas d'uploader les 2 images .gif également !

Utilisation de Videobox

C'est très simple, vous allez voir.

Pour inclure une vidéo:

<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="Ma video de vacances">Lien pour ouvrir la vidéo</a>

Simple non ? Il suffit de faire un lien vers la vidéo en lui mettant un attribut rel="vidbox".

Plus d'options:

<a href="http://www.domaine.com/votre_video.swf" rel="vidbox 800 600" title="Titre de la video">Cliquez ici pour voir la vidéo</a>

Donc vous voyez que l'on peut préciser la taille avec l'attribut REL. Et l'exemple montre que l'on peut ouvrir n'importe quel .swf via ce système.

Conclusions

Si pour les vidéos de type youtube il suffit de mettre l'url de la page, pour les autres il vous faudra mettre l'attribut SRC se trouvant dans la balise EMBED (donc l'url direct du SWF)

Après libre à vous de mettre un lien sous forme de vignette, histoire de rendre le tout encore plus sympa 😉

-----

Articles relatifs

M1000

Cette erreur apparait lors du chargement de videobox.js :

this.anchors has no properties
http://localhost/js/videobox.js
Line 23

Pourquoi ce la ne veut pas marcher ?

Merci de vos réponses
Pascal Magat

Salut,

Il y a une autre galerie ici genre I-Tunes avec notre nouvelle technique de diffusion vidéo.

(avec Firefox uniquement pour la gallerie)

http://www.streamfr.net/demos.php

Merci de votre visite
paul

Euh… question bête concernant Videobox :
comment fait-on pour faire une détection du plugin Flash, puisqu’ici ce n’est pas un swf que l’on charge dans la page html ?…
fine

salut

merci pour cette page sur videobox
je l’utilise pour mon futur site…
j’ai fait mes modif pour mon display du swf… et j’ai mis en ligne des liens tests…
2 types de fichiers sur les 4 liens:
1&2 fichiers flv
3&4 fichiers qtvr à manipuler soi même
lors de la première ouveture de chaque fichiers… no problème
mais quand je cjick une deuxième fois sur les liens qtvr…. pas d’animation….
quelqu’un aurait-il une idée?
http://simerique.free.fr
fine

oups….oubliée un petit gentil quand même:
grand merci….
fine

bonjour

bon personne n’a répondu à mon petit poste pour le moment mais je viens tout simplement vous dire qu’il s’agit en fait d’un bug de IE 7
Il a apparement à prendre en charge le reload ou unload de la fenêtre qtboxmovie puisque sous IE 6 y’a pas de pb…
merci quand même
stef

Bonsoir a tous
je suis plus nul que la moyenne car j’y pige vraiment rien…
tous ces fichiers sont a ajouter dans mon theme/js ou dans wordpress/js ???
les fichier images « close et loading a quel endroit.
et ce fameux lecteur flvplayer ou le mettons ???
merci de votre aide j’espere merci
stef
max

bonjour,

Je viens de découvrir vidéobox et c est justement ce que je recherchais.

Néanmois, je ne comprends pas le code que je dois mettre pour lire mes propres videos FLV. Mon site n est pas encore ligne, je travail tjs sur mon localhost.

Si qqun pouvait m’éclairer, ce serait très sympa.

D’avance merci
biloubil

Bonjour à tous
Est-ce que quelqu’un pourrait me dire comment déplacer la vidéo, elle s’ouvre « trop bas » il faut utiliser l’ascenseur pour accéder au bouton…

merci d’avance
Brakwiz

Bonjour,
J’ai comme un petit soucis !! J’utilise wordpress 2.5 avec le thème par défaut, sous Mozilla aucun problème (comme pa, par contre IE n’ouvre jamais les vidéos et safari les ouvre une fois sur deux. Avec un autre thème aucun soucis sur tous les navigateurs …
ROdny!

bonjour, j voulais savoir comment régler la position de la video je vois qu’elle souvre plus bas merci
BERNARD

j’ai une page sur laquelle des liens ouvrent des images en lightbox. J’aimerais également que sur cette page d’autre liens ouvrent des videos en videobox. Il semble qu’il y ai confli entre les differents js; Y-a-t’il moyen de réaliser cela; Merci
Fred

Bonjour à toutes et à tous,

et avant toute chose : merci pour cette video box et cette page dédiée. Très grand script et aide précieuse.

Cela étant, j’ai rencontré quelques problèmes et j’ai une question.

Appeler un flv en direct en passant par le fichier original flvplayer de la videobox ne fonctionne pas. En tous cas sur MacOSX. Que ce soit sur Safari, Firefox ou Opéra. Mais comme je connais Flash, j’ai crée mon propre lecteur, avec un skin de lecture externe lié. Le tout lié donc à mon flv. C’est ce lecteur que j’appelle depuis la videobox dans ma page à la place de l’original. Et j’ai bien sûr changé le nom et l’url dans les CSS et le fichier JS de commandement de la videobox. Moyennant quoi tout marche. Donc ça, c’est OK déjà.

Cela étant, j’ai plusieurs flv. Je voulais donc, j’espérais donc, pouvoir bénéficier des boutons prev et next sur chaque video lancée, comme dans les lightbox images. D’autant qu’à l’inspection du CSS, on note bien la présence des dits boutons gif (prevlabel et nextlabel). Or ces boutons n’apparaissent pas sur les vdéos, quels que soient les réglages, les url, les test que j’ai pu faire…
J’ai donc pensé au paramètre [roadtrip] de la lightbox qui permet cette fonction, en créant une sorte de sous-ensemble d’images groupées, lisibles ainsi en slideshow via les boutons de navigation. Mais j’ai eu beau arpenter le web en tous sens, je n’ai trouvé aucune trace d’une fonction équivalente pour la vidéo box…

Ma question est donc simple : quelqu’un saurait-il comment faire ? Quelqu’un aurait-il trouvé une fonction de la sorte ?

Merci pour toutes les réponses que l’on voudra bien donner.

Bien cordialement,

Fred.
1loup

>Fred: Je te conseille de regarder du côté de Shadowbox : http://mjijackson.com/shadowbox/index.html
Fred

Bonjour 1loup,

bien reçu ton post. Merci donc de m’avoir répondu.

Pour autant, cette shadowbox est une usine à gaz, inextricable et confuse, qui plus est totalement en anglais, qui à force de vouloir tout prévoir fait qu’elle devient incompréhensible et ingérable. Aussi bien à l’usage que – pire – à l’installation.

Résultat : ça ne marche absolument pas. Et après 1h30 dessus, je renonce.

Non moi, ce que je cherche , c’est un script léger (car en plus cette shadowbox pèse « une tonne » et nombreux sont les posts sur des forums pour s’en plaindre), dont les réglages sont évidents, parce que simples et fonctionnels. Comme la vidéobox donc. Il ne manque plus que la fonction de type [roadtrip] façon LightBox, c’est tout.

Ma demande initiale reste donc pleine et entière. Merci à toutes celles et tous ceux qui voudront bien me répondre.

Cordialement,

Fred.
Le Raton Laveur

J’ai réalisé un plugin similaire en utilisant une librairie Jquery. Qui peut ouvrir un grand nombre de médias.

http://www.jojoratonlaveur.fr/ressources/classbox-24.html

Le code est relativement simple pour être modifié à volonté (commenté en français)

Il n’y a pas non plus de fonction pour enchainer les vidéos sans revenir sur la page mais ça ne saurait tarder. Si tu es intéréssé par l’ajout d’une telle fonction viens faire un tour sur mon blog 🙂 (cliquer sur le pseudo)
Beuh_C

Bonjour @ tous,

Merci beaucoup pour cette videobox…

Petite question cependant, ou changer les paramètres de lecteur flv? (autoplay, fullscreen, etc)

Fred tu dis avoir changé ton skin, peux-tu indiqué la marche à suivre s’il te plait?

Cordialement,

Beuh C
Fred

Re-bonjour à tous,

Pour répondre donc à « Beuh_C » au sujet des skins personnalisés en Flash pour la vidéoBox :

Tout d’abord il faut Flash 9 ou CS3 pour créer son fichier swf appelant sa vidéo flv.
-> Une fois un nouveau document ouvert, on lui met une dimension : j’ai choisi 400X300, soit donc un taille médium, homothétique 4/3.
-> On se sert alors du composant Flash « FlvPlayBack » en le faisant glisser sur sa scène. C’est en fait le lecteur qui va appeler la vidéo flv externe.
Dès qu’on l’a fait glisser sur la scène, le pop up « Paramètres » de Flash change de configuration : tout y est indiqué pour relier sa vidéo au lecteur, le démarrer automatiquement ou non, etc, etc… Mais dans le cas qui nous occupe, il y la mention skin :
-> on clique dessus, une boîte de dialogue s »ouvre et on a alors le choix entre plusieurs skins originels de Flash. Puisque tu veux l’effet « plein ecran » il faut en choisir un avec la mention « full » dans son nom, indiquant donc le « fullscreen ». Tu as le choix entre un skin sur la vidéo, caché par défaut mais qui apparaît au survol de la souris, ou bien visible d’emblée mais semi-transparent (tu peux même lui adjoindre une couleur pour mieux s’inégrer à ta page de site etc…), ou bien encore le positionner sous la vidéo, etc… (pour ma part j’en ai pris un qui vient sur la vidéo auquel j’ai formaté une semi-transparence de 0.5)
-> Tu lies ensuite dans la mention « path » ton FlvPlayback avec ta vidéo (chemin absolu recommandé, donc celui de ton serveur).
-> Ceci fait : tu enregistres ton fichier en « .Fla » pour conserver ce fichier en modèle puis ensuite tu le publies pour obtenir ton swf pour le web.
-> Flash va alors ta créer ton fichier swf, lié à ton flv et aussi un autre fichier swf : ton skin. Tu as donc 3 fichiers (il faut les renregistrer dans le même dossier)
-> Tu ouvres ton serveur via ton ftp et tu les déposes tous les trois dans le dossier « swf » du dossier videoBox.
Reste enfin à modifier des fichiers natifs de la vidéoBox :
– Tout se passe dans le fichier « videobox.js :
-> D’abord pour changer le lien vers le lecteur : ce n’est plus le « flvPlayer » originel mais le tiens maintenant : donc à la place tu mets le nom de ton lecteur et le chemin vers le dossier swf du dossier videobox dans lequel il est placé (ligne 12)
-> Ensuite le le fichier videoBox.js : pour que le bouton « fullscreen » du skin fonctionne, il faut insérer dans le code de la balise html de flash dans ta page le code du « fullscreen ».
-> Ca se passe à partir de la ligne 129 : la condition « if else » php ici part de l’hypothèse que le fichier appelant est bien un fichier flash et que celui appelé n’est pas une vidéo Google ou autre mais bel et bien un flv : c’est donc notre cas. Il faut donc y rajouter le bout de code du plein écran ici :
voici le code exact : this.flash = true;
this.videoID = sLinkHref;
this.so = new SWFObject(this.videoID, « flvvideo », this.options.contentsWidth, this.options.contentsHeight, « 0 »);
this.so.addParam(« allowFullScreen », « true »);

Tu enregistres. Tu fermes.

Si tu as bien mis en place le code général pour la vidéoBox dans ta page web etc…, ton lecteur doit maintenant fonctionner avec ton skin.

Voilà.

Quant à moi, je recherche toujours une solution pour activer les boutons prev et next label de la vidéobox….

Bonne journée à tous,

Cordialement,

Fred
Dams

Bonjour à tous,

Je me permets de vous déranger car j’ai un petit souci avec « Classbox ».
En effet après avoir suivi les instructions d’installation à la lettre un problème surviens … voici le screenshot :

http://img378.imageshack.us/img378/2499/image1so0.jpg

Le pop-up ne affiche pas en entier (coté droit rogner) et le fond noir reste en barre en bas ou en haut de page.

Si quelqu’un à une solution à ce problème se serai la bienvenue
Merci d’avance ++

PS : Testé sous FF ca fonctionne … mais pas sous IE voici une adresse exemple cas ou : http://www.e-coasters.com/test2.html
Fred

Bonjour Dams,

J’ai regardé tes exemples de liens de e-coaster. Le problème demeure aussi sous Safari sur Mac. Or il n’y a pas de point de comparaison possible entre Safari et ce fichu IE sous Windows. Autrement dit, ça ne vient pas des navigateurs mais de tes réglages.

Aussi je ne vois qu’une seule explication à ton souci : ta vidéo est trop grande au regard des dimensions par défaut de la vidéoBox. Je crois que tu ne dois pas excéder 400px de large. Et pour conserver l’effet 4/3, tu ne dois donc pas dépasser les 300px de haut.

Deux solutions :
-1) Reformate ta vidéo Flash (car il me semble que c’est du FLV) directement dans ton exportation flv.
-2) Ouvre le fichier « videobox.js » dans le sous-dossier « JS » du dossier global « videobox ». Tu y trouveras les dimensons intialisées et celels par défaut de la vidéobox. (de la ligne 6 à la ligne 10). Tu verras que le max autorisé est de 425×350 par défaut. Essaie de changer ces paramètres en fonction de la taille de ta vidéo FLV…

Voilà. Bonne continuation, et cordialement,

Fred
Dams

Les vidéos sont encodées en flv 320×240 je ne peux pas faire plus bas sinon ca va devenir trop petit pour apercevoir quelque chose :s
Et je souhaiterai pouvoir utiliser le lecteur flash que j’ai crée également pas celui intégré qui a mon coup n’est pas joli graphiquement .
Dams

Bon apres test ce n’est pas de là que viens le problème, en effet apres avoir modifié le fichier « videobox.js », j’ai tester des vidéos de toute taille allant de 100×100 a 600×450 … toujours le même bugg sous Internet Explorer 7 alors que pas de soucis sous Mozilla Firefox cela fonctionne :s
Dams

Prob Résolu merci au codeur de « CLASSBOX » pour son aide !!
jerem

Bonjour à tous,

je trouve l’idée du Vidéobox vraiment géniale. Et j’aimerais pouvoir l’utiliser sur mon site.

Mais le problème est que ça n’est pas compatible avec Mootools 1.2 qui est sorti récemment et tout mon site fonctionne avec cette version de Mootools.

Est-il prévu de sortir une nouvelle version de Vidéobox utilisant Mootools 1.2 ?
Sofy

Bonjour à tous et merci pour ce super post !

Je viens reposer la question que « Bernard » avait posé, et qui ne semble avoir eu de réponse.

Lightbox et videobox sont ils compatibles ?
J’ai tout essayé depuis 2h, refait des tests… mais impossible de faire fonctionner les deux en même temps c’est l’un ou l’autre.
Quelqu’un connaît la solution à ce problème ? Merci d’avance
Sofy

snif personne pour répondre à ma question …. ???
Le Raton Laveur

@Sofy : Lightbox et Videobox ne fonctionne pas avec les mêmes moteurs donc ne doivent pas être compatible.

Si tu veux un script qui fait à la fois les vidéos et les images :
http://www.jojoratonlaveur.fr/zoombox?lang=fr
Gregory Dubois

Y a encore pas mal de trucs à corriger sur videobox, meme si globalement ça fonctionne bien :

– J’ai constaté des bugs de positionnement sur certains sites dans Opera 9.5, et des bugs d’affichage du fond d’ecran noir qui apparait.

– On ne peut pas utiliser SLIMBOX et VIDEOBOX sur une meme pas (conflits), sans doute parce que les noms des id utilisés sont exactement les memes pour Slimbox et Videobox…

– Dommage également qu’on ne puisse pas passer d’une vidéo à l’autre directement dans videobox, comme avec slimbox.

L’idée est très sympa mais vivement de nouvelles versions, rectifiant les bugs et améliorant la navigabilité…

ZOOMBOX ou CLASSBOX ont l’air mieux et plus complets.
laurent

Je suis définitivement épuisé (ou nul ou les deux à la fois) car je n’ai pas réussi à utiliser l’effet vidéobox sur mon blog alors si quelqu’un peut m’aider je suis preneur car rien ne fonctionne!!!
Merci d’avance
Jim

Bonjour à tous !

Quelqu’un aurait le plugin « swfobject.js » à m’envoyer ?
Il n’est plus téléchargeable.

Merci d’avance !
Titane

@max

Bonjour Max,

As-tu eu une réponse à ta question ci-dessous ?
=> Je suis dans le même cas donc je serais heureux de savoir comment il faut faire …

Merci d’avance

Ta question:

max :

bonjour,

Je viens de découvrir vidéobox et c est justement ce que je recherchais.

Néanmois, je ne comprends pas le code que je dois mettre pour lire mes propres videos FLV. Mon site n est pas encore ligne, je travail tjs sur mon localhost.

Si qqun pouvait m’éclairer, ce serait très sympa.

D’avance merci
Scorer

Bonjour,

Avez-vous essayer ça avec des liens de Dailymotion?! De mon coté ça marche pas, mais je crois qu’il faut ajouter quelques chose dans le fichier : swfobject.js.

Si quelqu’un peut aider, je le remercie.

Merci.

ScorerSpace
Bigott

Bonjour,
J’ai un problème avec la videobox, la video s’ouvre toujours dans le coin gauche de la page. Apparement je ne suis pas le seul mais je crois que personne n’a repondu a cette question encore.
Je ne sais pas trop quoi modifier le css de ma page ou autre…
Merci d’avance.
titane

Bonsoir Fred,

Comment faire pour intégrer ce lecteur çi « ivc_flvplayer.swf » dans vidéobox.
Que faut-il modifier ? Dans quels fichiers ? (videobox.css; videobox.js; autres …)

Merci d’avance,
Bonne soirée
Stephlg

POUR DAILYMOTION.
Rajouter ce bout de code dans le videobox.js :

else if (sLinkHref.match(/dailymotion\.com\/swf/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split(‘/’);
this.videoID = videoId[4];
this.so = new SWFObject(« http://www.dailymotion.com/swf/ »+this.videoID, « flvvideo », this.options.contentsWidth, this.options.contentsHeight, « 0 »);
this.so.addParam(« wmode », « transparent »);
}

ATTENTION : Il faut ensuite récuperer le bon lien sur dailymotion en faisant « exporter le code » puis recuperer l’adresse de la video qui est du type « http://www.dailymotion.com/swf/x5abcde »
samuel

bonjour tout le monde

Quelqu’un pourrait il me renseigner ou l’on doit intégrer le lecteur flvplayer? mes videos ne se lancent pas

Merci et bonne journée
samuel

c’est bon j’ai résolu mon problème je développais sur netbeans avec jsp et sur macromedia ça a marché et j’ai fini par trouver le problème d’affichage et la je me heurte à un autre c’est le son!

je n’ai pas de son quelqu’un l’aurait t il eu ce problème?

Merci
Mikael

Bonjour,

J’ai mis sur mon site cette vidéobox, mais ma vidéo à beaucoup de mal à se charger, et reste donc sur les premières images.

Est-il possible de mettre une barre de chargement, et que la vidéo ne commence que quand tout est chargé ?

Merci pour vos réponses.
monsieur F

Bonjour à tous !

Voilà, j’ai réussi à installer videobox sans problème et il fonctionne à merveille… sauf pour les vidéos sur Vimeo. Or c’est le portail vidéo que j’ai choisi d’utiliser pour diverses raisons professionnelles et j’aurais besoin que l’on m’aide pour que videobox fonctionne avec Vimeo.

Ne connaissant rien au JS, je vous implore de bien vouloir me donner un coup de main.

A très vite !

monsieur F
monsieur F

Re-bonjour tous, j’ai trouvé la solution pour Vimeo. Dans le fichier videobox.js, il suffit d’ajouter :

else if (sLinkHref.match(/vimeo\.com/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split(‘/’);
this.videoID = videoId[3];
this.so = new SWFObject(« http://www.vimeo.com/moogaloop.swf?clip_id= »+this.videoID, « flvvideo », this.options.contentsWidth, this.options.contentsHeight, « 0 »);
this.so.addParam(« wmode », « transparent »);
}

En revanche, dès que l’on met des z-index, ça chie un peu dans la colle !
askara

Salut. Je sais que cet article est TRES vieux… mais tu apparait premier sur Google lorsqu’on tape « video mootools »… Il y a une toute petite erreur, que je tenais à signaler, question d’éthique :p Tu as remplacé « juste en dessous de Mootools » par « juste en dessous de jQuery » dans la seconde instruction… ^^
Merci pour l’article !
Askara
julien

@samuel
Bonjour,
Tu dit avoir trouver une solution au problème de positionnement, pourrais-tu me dire comment tu as fait car ma vidéo apparaît tout en bas de ma page de plus je ne vois que la moitié droite de la fenetre.
nas

Bonjour,

j’ai intégré ce script sur mes pages web pour la lecture des vidéos, le souçi c’est que j’ai déjà d’autres animations javascript sur mes pages qui utilisent jquery-1.3.2 et ce dernier rencontre un conflit avec la présence de mootools;js

Quelqu’un peut m’aider svp?

Merci d’avance
Oneilos

Attention bug hyper difficile à résoudre :

Erreur : uncaught exception: [Exception… « Security error » code: « 1000 » nsresult: « 0x805303e8 (NS_ERROR_DOM_SECURITY_ERR) » location: « http://???????????/js/swfobject.js Line: 1″]

Le code de l’outil étant offusqué il a été très difficile de le résoudre. Il est aussi impossible de donner LA BONNE explication. Cependant pour le résoudre il ne faut pas utiliser id= »location » dans votre page web.

J’ai résolu ce bug en modifiant mon ID en id= »locations » avec un « s »
Lyriann Alkinoos

Bonjour à tous

Et merci pour la traduction et le partage.
Je voulais juste signaler que j’ai eu un problème de videobox. En fait, lorsque celle-ci s’affichait, les balises div situées sous le lecteur débordaient visuellement sur le background blanc du lecteur, rendant un truc caca et rendant illisible le texte du lecteur.

Pour résoudre ce problème, il faut changer la valeur de l’attribut z-index du body dans le code CSS du videobox (videobox.css), valeur qui doit être évidemment supérieure à celle des z-index des div situées en dessous du lecteur.

En gros, pour être tranquille :

Voilà
Merci encore.
Lyriann Alkinoos

Lyriann Alkinoos :

En gros, pour être tranquille :

Je reprends puisque mon code n’est pas passé. Il faut taper dans la balise body l’attribut:

z-index: 3;
Lyriann Alkinoos

Lyriann Alkinoos :
z-index: 3;

ou même une valeur de 10 pour être sûr que ça passe…
Martin

Merci pour ce tuto, trés bien fait, content d’avoir trouvé ce script qui gére les images et les videos, que demandais de +… bonne création a tous
Benfia

Bonjour,

Pour ceux qui veulent s’arracher la tête parcque leur site web ne s’affiche pas sur internet explorer voici peut être la solution !

Si vous utilisez des scripts BlogBang et même temps le plugin VideoBOx v1.0 alors vous risquez de ne pas pouvoir afficher votre site sur ie 7 ou 8

Solutionl: désactiver le plugin VideoBox tout simplement 😉

En espérant en aider plus d’un !
kUz

bonjour ! Comment on fait pour l’autostart de la vidéo, svp ? merci !