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.

02.02.2010

Un lecteur vraiment personnalisé pour Youtube, sans feuille de styles

Au début du mois de janvier, nous voyions comment personnaliser un lecteur vidéo Dailymotion en appliquant une mise en forme enregistrée dans la feuille de styles. Si cela vous permet de ne plus avoir à taper les codes de styles, cela veut aussi dire que tous vos lecteurs vont être identiques. Plutôt que de multiplier les insertions dans la feuille de styles, vous pouvez les "passer" en direct.

D'ailleurs, vous le savez déjà, si vous avez la curiosité de regarder le code HTML de vos notes. Si vous appliquez une couleur rouge sur un mot dans votre texte, le code ressemblera à ceci.

Si vous appliquez une couleur <span style="color: #800000;">rouge</span> sur un mot dans votre texte,

Avec <Span> on crée une exception dans la feuille de styles courante, puis on déclare les styles. Rien ne nous empêche de procéder de même pour la mise en forme d'un lecteur exportable vidéo.

Lire la suite

16:31 Écrit par Gee Mee dans Traitement d'image, Vidéo | Lien permanent | Commentaires (2) | Tags : lecteur, lecteur exportable, vidéo, youtube | |  del.icio.us | | Digg! Digg |  Facebook

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.

 

Lire la suite

13.10.2009

Un lecteur personnalisé pour diffuser vos MP3 sur votre blog

Il m'arrive parfois de pester en voyant l'ampleur démesurée des visites provoquées par la recherche d'information à propos du lecteur exportable de Deezer. Je crois avoir beaucoup mieux à faire que leur promotion, et notamment parce que c'est loin d'être la plateforme idéale. Nous allons d'ailleurs combler l'une de ses lacunes en même temps que l'une de la plateforme Hautetfort. Personnalisons donc le lecteur de fichier MP3.

Pour lire sur votre blog des fichiers sonores dont vous avez l'autorisation de diffusion, parce que cette chanson est expressément libre de diffusion (comme la plupart des contenus de Jamendo, et de Dogmazic), ou parce que vous l'avez faite vous-même (avec texte et composition musicale de votre cru, sinon, il faut quand même penser à la SACEM), Hautetfort propose une solution.


Insérer un fichier multimédia

Si vous n'avez pas eu la curiosité pour le faire, dans l'éditeur de note, cliquez donc sur le bouton à gauche de l'insertion d'image. Il représente un haut-parleur et une note. Vous pouvez insérer une vidéo, un son, depuis un fichier présent sur votre ordinateur, ou depuis une URL, et vous obtenez quelque chose comme ça.

Lire la suite

15:12 Écrit par Gee Mee dans Musique en ligne | Lien permanent | Commentaires (4) | Tags : lecteur, lecteur exportable, flash, mp3, player, playlist | |  del.icio.us | | Digg! Digg |  Facebook

17.04.2009

Deezer, suite F1

Ce blog existe pour apporter une aide bienveillante à ceux qui rencontrent de problèmes que je sais résoudre. Mais je ne me doutais pas que tant de personnes viendraient ici pour le lecteur exportable de Deezer.

Raison gardons, "tant de personnes", c'est encore assez peu avec une vingtaine de visites par jour dont les moteurs de recherche et autres visiteurs plus moins désirables.
Cela étant, les requêtes montrent que vous êtes nombreux à rechercher des informations à propos de lecteurs de musique à importer dans vos blogs. La manœuvre était facile avec Deezer, et je l'avais détaillée dans ces notes (ici pour le lecteur simple, là pour un lecteur simple personnalisé et encore là pour les listes et radio de Deezer et d'autres) devenues partiellement obsolètes depuis que la plateforme a changé de stratégie. Il existe encore une méthode que j'ai détaillée dans une note récente qui fonctionnera pendant... un certain temps. Il peut être techniquement possible de forcer la lecture de "playlist", mais je ne creuserai pas cette hypothèse.

Cette note publiée le 6/3 a été révisée le 17/04 : Il n'est pas utile de forcer, car la fonctionnalité de partage d'une liste de lecture est toujours diponible. La manipulation a été détaillée en image par Lavande de blogtuto dans la note "Mettre de la musique sur mon blog".

Lire la suite

09:35 Écrit par Gee Mee dans Musique en ligne, Personnaliser son blog | Lien permanent | Commentaires (6) | Tags : deezer, playlist, lecteur, exportable, jiwa, dogmazic, jamendo | |  del.icio.us | | Digg! Digg |  Facebook

05.12.2008

Comment aligner le texte autour d'un tableau

Le principe avait rapidement été abordé quand il s'était agit de lettrine. Il peut être utile d'enfermer un objet dans un tableau pour tourner autour.

Vous en faites l'expérience à chaque fois que vous insérez une image dans une note, mieux vaut ne pas se tromper de paramètre si l'on souhaite que le texte enveloppe l'image. Et quand vous insérez un lecteur, il n'y a pas moyen d'aligner le texte autour de l'objet, ce qui oblige le plus souvent à reléguer le lecteur en fin de note pour ne pas créer de grande coupure.

Puisqu'on peut aligner sur un tableau, encadrons les objets.

Le lecteur ci-contre été inséré dans un tableau aligné à gauche. Le texte lui-même aligné à gauche semble tourner autour, en limitant l'effet de coupure visuelle de l'insertion d'un objet. Et cela peut fonctionner avec n'importe quel type d'objet... Je m'avance peut-être un peu, mais vous ne perdez qu'un peu de temps à essayer.

Vous trouverez dans la brève Wysiwyg, un exemple de texte encadré, qui exige un alignement sur la droite.

podcast

Le texte de ce paragraphe-ci est aligné à gauche, comme le précédent, mais le lecteur de média se situe dans un tableau (dont le fond a été mis en couleur) qui s'aligne à droite. Alignement du texte en dehors du tableau, et alignement du tableau lui-même sont indépendant. Sans compter l'alignement du texte dans le tableau.

Voici le code du tableau à insérer.

Ce qui est en couleur n'est pas interprété, c'est du commentaire. Vous pouvez copier puis coller ce code dans l'une de vos notes, et vous obtiendrez un tableau aligné à gauche, avec une cellule contenant XX. Entre ces deux lettres, vous pourrez insérer un lecteur Deezer de petite taille. C'est à peu de chose près le code du cadre en haut de cette note.

<!-- -+-+-+-+- Tableau pour insertion d'objet -0- -+-+-+-+- -->
<table style="width: 224px; height: 59px;"
<!-- width indique la largeur, height la hauteur du tableau. Ici l'unité est le pixel, il faut se référer aux dimensions de l'objet et ajouter 4px aux deux dimensions. Ici, ce sont les dimensions d'un lecteur Deezer de taille réduite. -->
align="left"
<!-- choisir entre "left" et "right" pour l'alignement du tableau -->
border="0" cellpadding="2">
<!-- la bordure est à zéro, il n'y en a donc pas. Cellpadding règle l'espace entre bord de cellule et bord de tableau avec un cellpadding à 2, il faut augmenter la taille du tableau de 2 pixels sur chaque bord, soit 4 sur la hauter, 4 sur la largeur -->
<tbody><tr><td style="text-align: center;" valign="middle">
<!-- ces critères de styles alignent sur le centre de la cellule horizontalement d'abord, puis verticalement -->
<!-- -+-+-+-+-+- Code de l'objet à insérer -0- -+-+-+-+-+- -->

XX
<!-- ces XX servent de repères, il faudra les effacer après avoir inséré le code du lecteur Deezer -->
<!-- -+-+-+-+-+- Code de l'objet à insérer -1- -+-+-+-+-+- -->
</td></tr></tbody></table>
<!-- -+-+-+-+- Tableau pour insertion d'objet -1- -+-+-+-+- -->

22:35 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : blog, html, tableau, lecteur | |  del.icio.us | | Digg! Digg |  Facebook

02.12.2008

Mettre en ligne SA musique - 1

Vous en avez décidément entre les oreilles, et maintenant, vous souhaitez que circulent entre les notres vos propres créations sonores... Essayez, pour voir.

Vous avez fait le tour de ces diverses plateformes de musique en ligne, et vous souhaitez maintenant participer à l'émancipation des audiophiles avertis, des amateurs qui jamais n'abreuvent leurs sillons de sons impurs. Vos artistes à vous ne sont peut-être pas sur Deezer et ali. Souhaitez-vous partager l'émotion provoquée par des paroles amies, une ambiance sonore ? Toujours s'agit-il, en ligne d'une voix, de son, mettre.

Les méthodes sont moins tordues que mes jeux de mots. Quoique.

Au plus simple : Insérer un fichier multimédia

• Créez votre fichier son (format .mp3 .wma sans 10 Mo).
• Rangez le bien, on y revient très vite.
• Dans l'éditeur de note cliquez sur [Insérer un fichier multimédia].
• Restez dans l'onglet [Depuis un fichier].
• Allez chercher le fichier avec le bouton [Parcourir].
• Indiquez éventuellement des "tag".
• Indiquez éventuellement un lieu pour situer sur une carte
(on peut imaginer des "cartes postales sonores"...)
• Cliquez sur valider.

HF_bouton_media.gif

Dans l'éditeur, vous voyez un bouton [Media], et dans la note le lecteur : HF_lecteur_media.gif

NB : Le fond bleu marque l'existence d'un calque transparent. Cette zone prendra la couleur d'arrière-plan de votre note.

Ci-dessous, un "vrai" lecteur pour le titre "Come back to you" de l'album "This ain't Hollywood" du groupe "Silence is sexy" à découvrir sur Jamendo :

podcast

Le bouton [Podcast] permet de télécharger le fichier que vous avez mis en lecture. Vous devez donc rester prudent avec les fichiers qui ne sont pas les votres.

Notez bien que cette méthode n'a pas d'intérêt pour proposer un fichier disponible sur une plateforme de musique gratuite. Vous surchargez votre espace de stockage, et vous prenez un risque avec les droits d'auteurs. Pour vos créations, c'est la solution la plus simple. Quand vous vous sentirez assez fort, voyez avec Dogmazic ou Jamendo pour héberger vos créations dans un espace qui a été conçu pour cela.

Bientôt, une méthode plus tordue, avec une liste de lecture Deezer. Et plus tard encore, une évocation de l'indispensable Audacity pour vos fichiers sonores.

Post-scriptum

J'évoquais au début de cette note la possibilité de faire des cartes postales sonores, et il est un blog qui en fait de magnifiques. L'approche est assez radicale et ne laisse de place qu'au son. La voie du son maître ? Les créations mises en lignes sont originales, amusantes, grinçantes, émouvantes parfois et toujours intéressantes. Écoutez voir : Le son d'une nuit
NB : Dans le commentaire ci-dessous, Isdid m'a autorisé à citer son blog sans savoir ce que j'allais en dire. Et je l'en remercie

15:36 Écrit par Gee Mee dans Musique en ligne, Personnaliser son blog | Lien permanent | Commentaires (25) | Tags : blog, musique, son, lecteur | |  del.icio.us | | Digg! Digg |  Facebook

24.11.2008

Intégrer un lecteur de vidéo Youtube personnalisé

[màj:02/02/10] L'une des bonnes nouvelles de la semaine dernière, c'est le lancement sur Youtube d'une chaîne Monty Python. Une occasion rêvée pour voir comment intégrer un lecteur YouTube personnalisé sur son blog.

La méthode est la même que pour un lecteur Deezer, et c'est bien normal puisque la solution technique est la même. On "appelle" un lecteur en Flash hébergé comme le contenu à lire sur un serveur externe. On en profite éventuellement pour glisser en quelques paramètres un peu de couleurs.

Pour intégrer un lecteur YouTube :

Connectez-vous à YouTube et lisez la vidéo à installer.
Cliquez sur la roue dentée à droite de la zone "Intégrer une vidéo sur un site"
youtube_lecteur.jpg
Choisissez un jeu de couleurs
Choisissez entre inclure ou pas les vidéos similaires.
Si vous ne souhaitez pas partager vos autres vidéo, ou ne pas conduire vers les sélections de la personne qui a mis en ligne la vidéo que vous voulez diffuser vous-même, il faut choisir "Ne pas inclure".
Choisissez d'afficher ou non le cadre
Une fois vos réglages effectués, cliquez dans la zone
"Intégrer une vidéo sur un site"
Copiez le code
Dans l'éditeur Wysywig de Haut&Fort, cliquez sur "Insérer un fichier multimédia", puis sur l'onglet "code embed".
Collez le code et cliquez sur insérer.

 

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/WlBiLNN1NhQ&hl=fr&fs=1&color1=0xe15154&
color2=0xfcd5cb"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/WlBiLNN1NhQ&hl=fr&fs=1&color1=0xe15154&
color2=0xfcd5cb" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Vous pouvez aussi personnaliser les couleurs de votre lecteur "à la main". Dans le code du lesteur ci-dessus, le paramètre color1 qui indique la couleur du filet a une valeur de rose soutenu (e15154), et color2 qui indique la couleur du fond a une valeur de rose pâle (fcd5cb). Cette fois encore, attention à ne pas mettre le #, et à ne rien toucher d'autre.

Par défaut, le lecteur fait 425 pixels de large pour 344 pixlels de haut. Vous pouvez modifier ce réglage, à condition de respecter le rapport hauteur = 0,8094 x largeur, ou largeur = 1,2355 x hauteur selon la dimension prioritaire. Cela peut altérer la qualité d'affichage, mais vos visiteurs pourront toujours afficher le lecteur en plein écran avec la taille maximum acceptable définie par YouTube.

Don't forget : Always Look On The Bright Side of Life.

[màj:02/02/10] Si vous souhaitez personnaliser votre lecteur comme ce dernier, lisez la note : Un lecteur Youtube vraiment personnalisé, sans feuille de styles.


 

11:35 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : blog, lecteur, lecteur exportable, vidéo, youtube | |  del.icio.us | | Digg! Digg |  Facebook

04.11.2008

De la musique avec un lecteur Deezer personnalisé

Mise à jour du 6 mars 2009 : Deezer a changé de stratégie fin 2008, et les présentes notes sont devenues obsolètes. Il est dorénavant impossible d'exporter un lecteur à partir de la plateforme. Cela étant, une manœuvre est encore possible pendant... un certain temps. Vous en trouverez le détail dans cette note : Un lecteur exportable Deezer quand même.

Croyez bien que je tienne à prendre soin de vous, et à ne pas vous lasser de mes notes. J'essaie de varier les sujets pour ne pas vous assommer avec les possibilités de tel ou tel logiciel, de telle ou telle plateforme de musique...

Nous retournons cependant sur Deezer car nous n'en avons pas fini, et ce n'est même pas sûr que cette note soit la dernière.

Nous avons déjà pointé vers de la musique, et nous avons importé un lecteur standard. Et nous l'avons bien fait. Toutefois, les couleurs du lecteur Deezer par défaut peuvent paraître un peu sombres, et nous n'avons pas encore exploré les possibilités du bouton "Personnaliser le lecteur" en bas à droite à côté du code du lecteur exportable.

Deezer_lecteur_personnaliser.jpg

Cliquer dessus permet d'ouvrir une fenêtre dans laquelle on peut choisir la lecture automatique, la "langue" du lecteur (français ou anglais), et les couleurs organisées en "Thèmes".

Deezer_lecteur_personnaliser_themes.jpg

Cliquer sur un thème permet de voir immédiatement à quoi ressemblerait le lecteur. Il ne faut pas se demander ce que viennent faire ici les Rolling Stones, c'est purement indicatif. Le titre de la chanson que vous écoutez, et pour laquelle vous souhaitez un lecteur personnalisé, est repris en haut à droite sur fond gris.

 

Deezer_lecteur_personnaliser_couleurs.jpg

Cliquer sur "Personnalisez votre lecteur exportable" vous permet d'accéder à un niveau supplémentaire de choix. Vous pourrez choisir dans la palette web, la couleur de fond, la couleur des boutons (en fait le potentiomètre pour le volume), et la couleur des textes (Le nom de l'artiste, le titre de l'album et du morceau). Ainsi vous pouvez obtenir le magnifique lecteur que voilà :

 

 

 

C'eut été dommage de s'en priver non ?

La lecture automatique, c'est pas fantastique.
J'y suis même personnellement hostile. Vous ne pouvez pas savoir d'où vos visiteurs consultent votre blog, et vous devez envisager l'hypothèse selon laquelle certains profiteraient d'un temps de pause pendant leur harassante journée de travail. Les mettre en délicatesse avec leur entourage immédiat n'est tout de même pas dans vos intentions ? Et puis si vous publiez régulièrement des notes pour lesquelles vous choisissez une illustration sonore, l'ouverture simultanée de plusieurs pistes musicales risque de brouiller l'écoute.

Admettons que vous avez un goût plus sûr que le mien pour les harmonies chromatiques
, allié d'un sens tel de la précision que vous ne pouvez vous contenter de la palette web et que vous maîtiser parfaitement les codes RVB. La personnalisation du lecteur va vite vous lasser. Il existe une solution qui demande un peu d'organisation.

Vous ouvrez un éditeur de texte, du genre "Bloc-Note" Windows ("Notepad" pas "Wordpad") ou de l'excellent et gratuit "Notepad++" . Vous y coller le code de votre lecteur personnalisé avec soin, et vous obtenez quelque chose comme cela :

<div style="width:220px;height:55px;"><object width="220" height="55"><param name="movie" value="http://www.deezer.com/embedded/small-widget-v2.swf?idSong=539080&colorBackground=0xFFFF00&textColor1=0x00FF00&colorVolume=0xFF0000&autoplay=0"></param><embed src="http://www.deezer.com/embedded/small-widget-v2.swf?idSong=539080&colorBackground=0xFFFF00&textColor1=0x00FF00&colorVolume=0xFF0000&autoplay=0" type="application/x-shockwave-flash" width="220" height="55"></embed></object><br><font size='1' color ='#000000' face='Arial'>D&eacute;couvrez <a href='http://www.deezer.com/fr/the-pointer-sisters.html'>The Pointer Sisters</a>!</font></div>

Enregistrer ce fichier sous un nom du genre "mon_lecteur_deezer.txt" avant d'intervenir.

Que voit-on dans ce code, avec de bons yeux ?
L'identifiant de la chanson : idSong=539080
La couleur d'arrière plan : colorBackground=0xFFFF00
La couleur du texte : textColor1=0x00FF00
La couleur du bouton de volume : colorVolume=0xFF0000
La lecture automatique, ici désactivée : autoplay=0
Ces paramètres sont donnés deux fois de suite.
En fin de paragraphe, on repère un chaîne de texte invitant à découvrir l'artiste que vous étiez en train d'écouter sur Deezer (ici les Pointer Sisters). Vous noterez le codage du "é" en "&eacute;" ...

Je vous conseille de :
- supprimer toute la chaîne correspondant à celle-ci
<br><font size='1' color ='#000000' face='Arial'>D&eacute;couvrez <a href='http://www.deezer.com/fr/the-pointer-sisters.html'>The Pointer Sisters</a>!</font>
- remplacer "idSong=539080" par "idSong=$"
- veillez à le faire deux fois
- enregistrer votre fichier.

La prochaine fois que ous voulez mettre un lecteur sur votre blog :
- repérez la valeur indiquée pour "idSong=" pour votre chanson
- ouvrez votre fichier "mon_lecteur_deezer.txt"
- remplacez "idSong=$" par "idSong=539080" (C'est un exemple hein ;-)
- veillez à le faire deux fois
- copiez le contenu intégral de votre fichier "mon_lecteur_deezer.txt"
- insérez le code, comme nous l'avons déjà fait.

Vous ferez forcément des erreurs au départ, mais c'est sans gravité, vous risquez seulement de perdre un peu de temps avant d'en gagner.

12:30 Écrit par Gee Mee dans Musique en ligne, Personnaliser son blog | Lien permanent | Commentaires (18) | Tags : blog, musique, deezer, lecteur | |  del.icio.us | | Digg! Digg |  Facebook

29.10.2008

De la musique avec un lecteur Deezer

Mise à jour du 6 mars 2009 : Deezer a changé de stratégie fin 2008, et les présentes notes sont devenues obsolètes. Il est dorénavant impossible d'exporter un lecteur à partir de la plateforme. Cela étant, une manœuvre est encore possible pendant... un certain temps. Vous en trouverez le détail dans cette note : Un lecteur exportable Deezer quand même.

Mettons que, non content de vous proposer une chanson choisie pour une homophonie toujours aussi approximative qu'involontaire avec ce blog, je souhaite que vous restiez ici pour l'écouter. Je peux importer un "lecteur", comme je l'ai fait ci-dessous. C'est plus simple qu'il n'y paraît.

 

Étape par étape, pour une chanson :

- Lire une chanson sur Deezer
- Cliquez sur le bouton [Copier] de la ligne "Lecteur exportable" de la chanson en cours de lecture
- Dans la note, positionner le curseur où se situera le lecteur.
- Cliquer sur le bouton avec la note et un haut-parleur [Insérer un fichier multimédia]
- Cliquer sur l'onglet [code embed]
- Dans la zone "Insérer le code de l'embed" coller le code du lecteur exportable
- Valider en cliquant sur [Valider]
- De retour dans votre note, vous voyez un espace jaune avec une icône portant un ( f )

 

Trop facile non ?

Sur Deezer, et sur les plate-formes similaires, il vaut mieux utiliser le bouton [copier] proposé, plutôt que sélectionner soi-même le code avec la souris à partir d'une trop petite case.

"Embed", signifie "embarquer". En réalité, vous n'importez que des commandes qui permettront à des applications et des fichiers hébergés ailleurs d'être visibles sur votre blog. Vous n'embarquez donc pas grand chose, puisque Deezer peut couper l'accès au fichier visé, et garde donc toute son indépendance. À la différence des journalistes qui étaient eux aussi "embedded" dans les blindés américains...

Nous verrons la personnalisation d'un lecteur Deezer, et les autres modes d'insertion de fichier multimédia.

13:12 Écrit par Gee Mee dans Musique en ligne, Personnaliser son blog | Lien permanent | Commentaires (9) | Tags : blog, musique, deezer, lecteur | |  del.icio.us | | Digg! Digg |  Facebook