Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

08.01.2010

Un lecteur vraiment personnalisé pour les vidéos DailyMotion

[maj] Par hasard, alors qu'il m'avait vu le premier, j'ai découvert l'univers d'un "apprenti conteur visuel", d'un artiste de l'image qui sait aussi écrire. Serait-ce qu'il passe sa vie au cinéma, pour voir les films des autres, préparer les siens, et parfois regarde le halo blanc du projecteur dans les ténèbres, maintenant il l'affirme : J'habite sous la lune. Pour aujourd'hui je vous invite à vous laisser émouvoir par "Sick Boy & The Tree", et quand vous aurez repris vos esprits, lisez la suite pour voir comment encadrer les vidéos que vous proposez sur votre blog.

 


L'objet Dailymotion n'est pas à proprement encadré, il a été placé dans une division qui comporte un arrière-plan. Les marges placent l'objet au bon endroit pour entretenir l'illusion.

Paul JAEGER, m'a très aimablement expliqué les détails de sa démarche, que l'on retrouve d'ailleurs encore dans une contribution toujours disponible sur ce forum. Pour vous proposer cette vidéo avec son accord, j'ai dupliqué une partie de sa feuille de styles. C'est cependant ma modeste tentative d'appropriation que je vais détailler ci-dessous.


Une image d'arrière-plan

Il faut d'abord une image, et c'est à votre imagination de prendre le pouvoir. Contour d'un écran de télévision ancienne, rideau de théâtre, décor de dernière séance, cadre de tableau, iris absente... Seul votre bon goût vous arrêtera, ou pas, dans la tentative désespérée de remettre un peu d'humanité dans un œil 1, pour paraphraser l'auteur sus-cité.

La taille par contre n'est pas indiférente puisque nous devons encadrer un espace d'environ 293 pixels de large sur 250 de haut. Cette cote n'est pas si mal taillée puisqu'elle permet d'inclure, les vidéos en 4/3 et en 16/9 avec le lecteur.

Le fond de l'image n'est pas complètement indifférent non plus car lorsque les vidéos 4/3 "collent" aux commandes du lecteur, les vidéos 16/9 sont centrées dans la hauteur sur un fond noir, que je ne sais pas changer.

J'ai donc moi même récupéré une image de vieux téléviseur, dont je n'ai gardé que l'encadrement d'écran. Je l'ai détouré, évidé, et étiré pour y loger les vidéos. Il aurait aussi fallu peaufiner le détourage et modifier la perspective pour redresser l'ensemble. Mais vous ferez mieux.


Du code CSS

Il faut ensuite préparer une nouvelle section pour la feuille de styles.

/* Class video pour cadre dailymotion sur une idee de http://www.jhabitesouslalune.com
personnalisé par http://geemee.hautetfort.com
-------------------------------------------------------- */
.videogm {
width:385px;
height: 356px;
background: transparent url(http://geemee.hautetfort.com/images/aspire/bkg-video-geemee.jpg) no-repeat;
padding: 65px 36px 24px 87px;
}

J'ai intentionnellement laissé une adresse URL complète, si vous voulez essayer ce code dans votre feuille de styles sans télécharger l'image. Pour votre création, vous devrez une ajuster les dimensions width et height, ainsi que les paramètres de padding, qui de fait, commanderont la position de la video par rapport aux bords de l'image. Rappelez-vous la montre carrée, c'est d'abord en haut, puis à droite, puis en bas, et enfin à gauche.


Personnaliser les commandes du lecteur

Le code de l'objet ci-dessous détermine la couleur de fond des boutons, celle du relief, celle de la barre de progression notamment.

<div class="videogm">
<object height="250" width="293" data="http://www.dailymotion.com/swf/x6k09k&amp;colors=background:000000;foreground:B5B5B5;special:e2a665;&amp;related=0" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true" />
<param name="allowScriptAccess" value="always" />
<param name="src" value="http://www.dailymotion.com/swf/x6k09k&amp;colors=background:000000;foreground:B5B5B5;special:e2a665;&amp;related=0" />
</object>
</div>


Choisir le film

Quand vous visionnez un film sur Dailymotion, vous avez une adresse du type :
http://www.dailymotion.com/video/x6k09k_je-ne-vous-aime-pas_fun

L'identifiant du film est x6k09k d'ailleurs, vous le retrouvez dans le code ci-dessus.


Résumons-nous

1. Je choisis une image d'arrière plan sur laquelle je compte placer un espace de 250x293 en hxl.
2. Je crée une section de code CSS en m'inspirant de celui-ci, que j'irai coller à la fin de ma feuille de styles. [maj]Ce code a été mis jour le 2 février pour la compatibilité Internet Explorer.

/* Class video pour cadre dailymotion sur une idee de http://www.jhabitesouslalune.com
personnalisé par http://geemee.hautetfort.com
-------------------------------------------------------- */
.videogm {
width:474px;
height:403px;
background: transparent url(http://geemee.hautetfort.com/images/aspire/bkg-video-geemee.jpg) no-repeat;
padding: 65px 36px 24px 87px;
}

3. Je copie le code du lecteur ci-dessous que je garde dans un fichier texte ou une note en mode brouillon. J'y ajoute éventuellement quelques réglages de couleur, et j'enregistre ce code qui ne bougera plus. [Ce code a été mis à jour]

<div class="videogm">
<object height="250" width="293" data="http://www.dailymotion.com/swf/x6k09k&amp;colors=background:000000;foreground:B5B5B5;special:e2a665;&amp;related=0" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true" />
<param name="allowScriptAccess" value="always" />
<param name="src" value="http://www.dailymotion.com/swf/x6k09k&amp;colors=background:000000;foreground:B5B5B5;special:e2a665;&amp;related=0" />
</object>
</div>

4. Je repère un film à partager sur DailyMotion, par exemple :
http://www.dailymotion.com/video/xbj7bt_the-sick-boy-and-the-tree-vost-hd_creation
dont je note l'identifiant : xbj7bt
5. Je récupère le code du lecteur enregistré, je le copie.
6. Dans la note, j'insère un objet multimédia en sélection l'onglet "code embed".
7. Je colle le code du lecteur
8. Je modifie deux fois l'identifiant du film.
9. Je valide, et c'est prêt.



Les opérations 4. à 9. du mode opératoire ci-dessous sont assez simples, même s'il faut avoir beaucoup travaillé auparavant. Mais cela en vaut peut-être la peine, non ?

Quand vous aurez visité le site de Paul Jaeger, et que vous aurez mis en œuvre vos propres idées, n'hésitez pas à me les faire découvrir !

[02/02] : Vous pouvez compléter votre lecture par "Un lecteur vraiment personnalisé pour Youtube, sans feuille de styles"


1 Pierre Desproges : "Il y a plus d’humanité dans l’œil d’un chien quand il remue la queue que dans la queue de Le Pen quand il remue son œil."
Texte de scène, Éditions du Seuil. Citation "politique" extraite du site officiel

 

 

Commentaires

C'est un rien génial ça ! bel effet, beau résultat, perso j'adore : -)

Écrit par : Bougrenette | 11.01.2010

Répondre à ce commentaire

Merci, mais ce serait tellement mieux avec ton sens artistique... Quand tu pourras, va visiter le garçon, ça vaut le détour.

Écrit par : Gee Mee | 11.01.2010

Effectivement, j'en viens et il le vaut ce grand détour, un beau talent.

Écrit par : Bougrenette | 13.01.2010

Répondre à ce commentaire

sympa le lecteur

Écrit par : lives score | 28.02.2011

Répondre à ce commentaire

Les commentaires sont fermés.