Bienvenue sur le forum d'entraide d'OverBlog.
Nous vous conseillons de chercher une réponse sur notre base de connaissances avant de poster une demande sur le forum.
***[RÉSOLU] Musique sur le blog (et démarrage automatique)
  • Toujours preneur/partant ^^ ...


    Un exemple 

    Pour écouter ma musique cliquez ici (Clic droit : ouvrir nouvel onglet ... [un clic direct ouvre direct/remplace cette page (c'est le forum qui fait ça)])

    (gaffe c'est du solide) (et dans cet exemple tu n'aura peut-être pas le plugin WMP [et ca ne fonctionnera pas] ce qui fait que cela ne sera qu'un demi exemple, en plus ça sera "plein écran" et avec ce forum dans la même fenêtre [sauf à faire clic droit nouvelle fenêtre]... mais ça c'est du détail)

    Si tu me donne l'url vers ton youtube (ta playlist) je pourrai (/saurai) te donner le code en retour ;)


    C'est bon ça dark sanctuary ^^

  • image


    :))   :(|) 

    :\"> ==>> je sors ==>> 
  • Le code html que j'ai eu sur youtube pour la musique provisoire est le suisvant: 

    <iframe width="500" height="200" src="http://www.youtube-nocookie.com/embed/s5Ljd9V5FNc?list=PL3F14B0E5A1AD3F37" frameborder="0" allowfullscreen></iframe>






    J'aime bien le principe de l'exemple que tu as donné/ Un texte avec écrit "cliquez ici" et pouf un lecteur qui se lance (perso il a fallu que ca se telecharge, et une fois cliqué sur le telechargement terminé ca a lancé la musique). C'est pas mal et ca laisse totalement le choix au visiteur du blog. 
    Reste à voir comment tu as fait et si c'est faisable avec une playlist.

    J'aime aussi bien le lecteur youtube qui est familier et ne prend vraiment pas beaucoup de place en bas de la page. Ca serait pas mal non plus de laisser le lecteur youtube, centré, en bas de page. 
    Mais le problème c'est que la musique se coupe... 
  • Salut,

    Le petit délai est dû au fait qu'une partie de la musique est préchargé en "buffer" (mémoire tampon) comme ça une fois lancé si le débit ralentit ou en cas de mini(s) coupure(s) c'est le buffer qui décharge pour ne pas créer de coupure à l'écoute (c'est surtout pratique pour les petits/bas débits ;) ) (c'est ce qui explique aussi en partie le décalage/retard entre écouter une radio sur le net ou via [par exemple] la fm)

    Pour ta playlist youtube ;
    Teste avec ce code :

    <p>
        <a title="Playlist Dark Sanctuary" onclick="window.open(this, 'Auteur Roman Koncept playlist : Dark Sanctuary', 'width=640,height=360'); return false;" href="http://www.youtube.com/embed/s5Ljd9V5FNc?list=PL3F14B0E5A1AD3F37"><img alt="cliquer ici pour ouvrir ma playlist" height="205" width="500" class="CtreTexte" src="http://ddata.over-blog.com/0/02/35/79/Aide-ob/auteur-roman-koncept-playlist-002.png" /></a>
      </p>

    Ça devrait donner ça : (si ça passe sur le forum) :
    [édit : non sur le forum avant publication c'est bon, mais une foi publié ça ouvre pleine page, mais sur le blog ça devrait être bon]


    cliquer ici pour ouvrir ma playlist

  • Notes : 

    J'ai fait deux images ;
    La première est juste un printscreen (recentré sur le lecteur youtube) de ce que tu as pour le moment sur ton blog
    La deuxième est la même image que j'ai un peu retravaillé - ajout de texte (c'est celle qui est utilisé dans le code)
    Elles sont hébergées sur un blog V2 ... par précaution je te conseille de les enregistrer sur ton DD, car je ne pense pas garder ce blog une fois la migration obligatoire (c'est un blog qui me sert juste pour des archives & essais/tests)

    Dans mes tests l'image est bien centrée. (si ça le fait pas sur ton blog on fercera via le/la css ;) )
    Un pop-up s'ouvre en mode "réduit" (pas pleine page), mais si tu préfère je peux changer ça
    Une fois le popup ouvert la musique ne démarre pas automatiquement, sans doute du fait que pour "bricoler" pour faire ce que tu désirais cela n'est plus un(e) iframe

    Le code expliqué dans les grandes lignes :

    <a title="Playlist Dark Sanctuary" = le terxte qui s'affiche au survol (/passage) du curseur sur l'image

    onclick="window.open(this, 'Auteur Roman Koncept playlist : Dark Sanctuary', 'width=640,height=360'); = ouverture autre fenêtre, nom de la fenêtre, taille de la fenêtre (ici pour correspondre à la taille de la vidéo [donc si un jour tu change (ou que quelqu'un d'autre utilise le code) il faudra vérifier que c'est les mêmes dimensions avec une autre vidéo])
     return false;" href="http://www.youtube.com/embed/s5Ljd9V5FNc?list=PL3F14B0E5A1AD3F37"> = l'url de la vidéo

    la deuxième partie du code correspond à l'image "à cliquer"
    <img alt="cliquer ici pour ouvrir ma playlist" = texte alternatif "au cas où" l'image ne charge pas
    height="205" width="500" = taille de l'image (à adapter au format de l'image désirée [respecter proportions pour pas déformer] ou en cas de changement d'image)
    class="CtreTexte" = Le centrage de l'image

    />
  • Quel travail!
    C'est super je te remercie d'y avoir passé du temps. 

    Ca marche très bien, la musique reste au choix du visiteur, en bonne qualité et surtout pas trop invasive sur le blog. Quelle que soit la page ou l'article du blog consulté la musique continue sans coupure. 
    C'est impeccable. 

    Par contre je vais faire mon tatillon ^^
    Mais le lecteur n'est pas centré, ca n'a pas fonctionné. Il reste toujours dans un coin en bas à gauche. 

    Et juste le texte sur l'image du lecteur "ici" avec la flèche est en rouge. Est-il possible de l'avoir en bleu clair? J'apprécie l'apparence du blog avec un coloris Noir/Gris/Argent/Bleu.  Je trouve que ca va bien ensemble et j'essaie de maintenir une certaine harmonie. 

    Merci encore de ton super travail. Je vais pouvoir me concentrer sur les dernières finitions de mon blog. 

    Maintenant que j'ai réussi à gérer les images, la musique, je vais m'attaquer aux widgets. 
    Merci d'ailleurs d'avoir détaillé le code, ca me permet de mieux appréhender le HTML.


    A très bientôt, en espérant pouvoir te renvoyer l'ascenseur un jour. 
  • MAJ: 

    J'ai fouiné sur internet, j'ai lu qu'il y avait des balises <center>, ou des margin:auto ... ou autres trucs exotiques du genre. J'ai essayé d'écrire ces trucs dans le HTML et ca n'a pas fonctionné. 

    Par contre, je me demande si, dans le code que tu m'as donné, il est écrit "center texte" . Or la il s'agit de centrer un truc, une vidéo, qui n'est pas du texte. Ca vient peut-être de là. Le tout est de savoir comment on désigne une vidéo en html...

    Je poursuis mes recherches. 
  • Re :)

    Donc un premier tour dans le CSS

    Ajoute ceci dans le html-CSS (chemin dans l'administration du blog ; THÈME => CONFIGURER => HTML
    une fois là clic gauche dans le code et fait "Ctrl f" dans la fenêtre qui s'ouvre colle "clic droit et coller (ou recopie) : </style> et une fois trouvé ce </style> juste avant colle ) :

    /* -- Centrer image bas de page -- */
    #index.withsharebar p {
    text-align: center;
    }

    (j'aurai pu juste indiquer "p" mais je joue la prudence)
    (édit : J'aurai aussi pu "jouer" sur "img" mais alors ça influenç(er)ait toutes tes/les images du blog ;) )


    Pendant ce temps je vais changer les couleurs de l'image ;) 
  • Pour l'image voilà :
    http://ddata.over-blog.com/0/02/35/79/Aide-ob/auteur-roman-koncept-playlist-003.png
    (Rappel : sauvegarde-là sur ton DD [terminal/ordi])

    J'ai repris le bleu de tes liens etc. : #13c5ff en Hexa (ou/=  19.197.225 en RGB [/RVB])

    donc dans le code que tu as placé, tu change juste le 002 en 003
    (dans cette partie
    img alt="cliquer ici pour ouvrir ma playlist" height="205" width="500" class="CtreTexte" src="http://ddata.over-blog.com/0/02/35/79/Aide-ob/auteur-roman-koncept-playlist-002.png" /></a>)

    ;)

  • Chat marche pas ^^
    J'ai trouvé le <style> et copié ce que tu m'as donné, mais ca n'a aucun effet. J'ai essayé de mettre ces lignes après le <style> pour voir, aucun effet non plus. 


    Pour la couleur c'est impec. Discret et ca s'intègre au reste du design. Le rouge attirait trop l'attention. 
    Je préfère que le visiteur se focalise sur les images tournantes en haut, car c'est l'essentiel du blog. 
    (enfin, une fois qu'il sera rempli. Pour le moment ce n'est qu'un squelette).

    Merci encore de tes efforts! Mais j'avoue que si même toi qui a l'habitude n'arrive pas à centrer cette vidéo, c'est que ca ne doit pas être possible. Au pire je laisserai comme ca même si ca brise un peu l'équilibre du visuel. 
  • Arf, j'vais pas fait attention à ta MàJ ... en fait (pour simplifier au maximum) c'est parce que l'image est dans un "bloc texte" (cf mes balises "<p>" "</p>" ... ["p" pour "paragraphe"]) et donc c'est ce bloc qui influence (sur) la position de l'image dans le code que je t'ai donné ^^

    Suis un alien =:) et donc j'ai des fois d'étranges façons de faire/procéder :D
  • J'ai réussi!! Comme un grand! Je te donne la réponse, si un jour un autre bloggueur a le même problème: 

    En fait il faut rajouter: 
    <div style="text-align:center;">                au début

    et

    </div>  à la fin du code. 



    Ce qui pour mon cas donne le code suivant: 

    <p>
        <div style="text-align:center;"><a title="Playlist Dark Sanctuary" onclick="window.open(this, 'Auteur Roman Koncept playlist : Dark Sanctuary', 'width=640,height=360'); return false;" href="http://www.youtube.com/embed/s5Ljd9V5FNc?list=PL3F14B0E5A1AD3F37"><img alt="cliquer ici pour ouvrir ma playlist" height="205" width="500" class="CtreTexte" src="http://ddata.over-blog.com/0/02/35/79/Aide-ob/auteur-roman-koncept-playlist-003.png" /></a></div>
      </p>


    Et ca marche parfaitement. Voilà. Merci à toi en tous cas. Je vais pouvoir voler vers de nouveaux horizons... et de nouvelles difficultés du monde HTML...
  • C'est aussi une façon de faire :)
    Merci d'avoir pensé aux autres ^^

    Et, avec plaisir et bonne continuation ;)

    PS; Attention c'était avant /style et pas avant style, ni juste après.
    Le "C" de CSS c'est "Cascade", donc il faut ajouter par la fin - "c'est le dernier qui parle qui a le dernier mot ^^" (mais sans importance puisque tu as fait autrement ;) )
  • Mais de rien. Mon prochain cheval de bataille: comprendre comment marchent les widgets. 

    J'ai vu qu'en y consacrant du temps, de la bonne volonté, des recherches, et avec l'aide d'un bloggueur expérimenté, on peut arriver à débloquer des situations. 
    Le plus dur en fait, c'est vraiment la recherche d'infos au départ. Car on trouve tellement de choses sur le web, et le html est tellement pointu, que je trouve des dizaines de sites sur lesquels je ne comprend absolument rien. 

    C'est l'avantage d'avoir un forum d'aide. 
  • ;) Surtout qu'ici l'entraide est "centré" sur l'outil (OB) utilisé :P

    Belle soirée