Lecteur Youtube invisible à lancement automatique

Lecteur Youtube invisible à lancement automatique - HTML/CSS - Programmation

Marsh Posté le 27-02-2015 à 16:20:45    

Bonjour,
Je dispose d'une vidéo youtube, celle-ci : https://www.youtube.com/watch?v=Wz0GgcVdHR0
Ce que je souhaiterais, c'est faire en sorte d'intégrer cette vidéo dans une réponse d'un forum, et donc, que la vidéo se lance automatiquement et en boucle lorsque le sujet est ouvert. Je souhaiterais également que le lecteur soit invisible et qu'on en voit les boutons.
Je sais que les musiques de fond sont désagréables, le plus souvent. Là, l'intérêt est justement de rendre ça un peu désagréable, mais pas trop. Il s'agit d'intégrer cette musique dans la réponse à un forum RPG.
Pour éviter que ce soit trop dérangeant, cependant, je souhaiterais qu'en cliquant sur une partie du texte, on puisse mettre la musique en pause.
Imaginons donc qu'en cliquant sur ce texte, la musique se mette en pause :
"Quoi ? T'aimes pas la musique ? Bah, alors pourquoi tu ne cliques pas sur cette phrase ?"
Mais lorsque l'on clique sur cette phrase, une autre apparaît à la place en disant :
"Mais non ! Pourquoi tu as arrêté la musique ?"
 
Je ne sais pas s'il est possible de faire ça avec le texte, mais, au pire, je peux utiliser des images du texte.
 
J'ai fait des recherches intensives auparavant sur Google en tapant "Lecteur Youtube invisible" ou caché, ou masqué, pas de résultat convenable, du coup, je me tourne vers vous en espérant que vous pourrez m'aider...

Reply

Marsh Posté le 27-02-2015 à 16:20:45   

Reply

Marsh Posté le 27-02-2015 à 17:29:11    

Tu devrais prendre un problème après l'autre.
A ta place je ferais ces recherches que je combinerait.
- vidéo qui se lance automatiquemen
- vidéo qui tourne en boucle
- bouton invisible
 
Etc...
 
Mais sinon je pense qu un sliders peut faire tout ça ou presque après ça s intégré pas dans un forum.
 
Bon je suis pas expert je dis peut être que de la merde....


Message édité par CooKKarachA le 27-02-2015 à 20:18:32
Reply

Marsh Posté le 28-02-2015 à 01:26:07    

Ben, une vidéo qui se lance automatiquement, j'ai trouvé, une vidéo qui tourne en boucle, j'ai trouvé aussi ^^
Il me faut uniquement le bouton de commande à insérer dans un texte qui change lorsqu'on clique dessus ^^
Je disais ça, c'était pour situer le contexte et expliquer mon projet, maintenant, tu as raison, j'aurais dû préciser ce que je savais déjà faire ^^

Reply

Marsh Posté le 28-02-2015 à 17:24:38    

Reply

Marsh Posté le 01-03-2015 à 11:59:32    

Non, pas exactement cook, ça serait plus du genre une texte qui dit :
"Ouais, si tu veux pas écouter la musique, cliques ici"
Et si on clique sur ce texte-là, le texte change et affiche "Hey ! T'as cliqué !" Ou un truc du genre...
C'est un bouton dissimulé dans du texte qui changerait ce même texte et qui mettrait la vidéo en pause/lecture par la même occasion.

Reply

Marsh Posté le 02-03-2015 à 14:18:42    

J ai pas les connaisances pour.
Mais j' essaye de donner des pistes.
Ton bouton correspond a un lien cliquable après a part changer la couleur, je ne pense pas que tu puisse changer le texte.
Par contre, comme solution possible serai une image du texte qui change lorsque l on clique.  
Après faut voir si tu peux y insérer un bouton.
 
Le truc possible mais c pas vraiment ce que tu veux:
Un sliders avec 2video, une en marche et une en pause et sur chaque vidéo le texte que tu veux ( mettre un sous titre permanent).
 
C es de la bidouille, mais c'est mieux que rien !!!


Message édité par CooKKarachA le 02-03-2015 à 14:24:22
Reply

Marsh Posté le 03-03-2015 à 17:38:27    

Je n'ai pas très bien compris ce que tu proposes cook ^^

Reply

Marsh Posté le 03-03-2015 à 20:26:38    

Tu peux essayer ceci comme javascript avec les id "testonclick" de ton texte et "audioplayer" pour ton player
 
document.getElementById("testonclick" ).onclick=function(){
 if (document.getElementById("testonclick" ).innerHTML=='play'){
 
  document.getElementById("testonclick" ).innerHTML='stop';
  document.getElementById("audioplayer" ).pause();
 }
 
 else{
  document.getElementById("testonclick" ).innerHTML='play';
  document.getElementById("audioplayer" ).play();
 }
}
 
Cordialement

Reply

Marsh Posté le 03-03-2015 à 23:29:26    

merci the_Grim  
 
faut vraiment que j’apprenne les bases du javascript
j'aurais l'air moins c**

Reply

Marsh Posté le 04-03-2015 à 12:12:39    

Merci The Grim pour le coup de pouce, du coup, j'ai tenté de faire ça avec le peu de connaissances que j'ai sur le Javascript, et du coup, forcément, ça ne marche pas ^^
Pouvez-vous me dire ce qui ne va pas avec mon code ?

Code :
  1. <script type="text/javascript">document.getElementById("testonclick" ).onclick=function(){
  2. if (document.getElementById("testonclick" ).innerHTML=='play'){
  3.   document.getElementById("testonclick" ).innerHTML='stop';
  4.   document.getElementById("audioplayer" ).pause();
  5. }
  6. else{
  7.   document.getElementById("testonclick" ).innerHTML='play';
  8.   document.getElementById("audioplayer" ).play();
  9. }
  10. } </script>
  11. <audio src="audioplayer" controls>
  12. <embed
  13. src="http://dl.free.fr/jy2PIfxAi"
  14. width="180"
  15. height="90"
  16. loop="true"
  17. autostart="true" />
  18. </audio>
  19. <div id="testonclick">
  20. <script language="javascript">
  21. function changeText(idElement) {
  22.     var element = document.getElementById('element' + idElement);
  23.     if (idElement === 1 || idElement === 2) {
  24.         if (element.innerHTML === 'Blabla') element.innerHTML = 'Bloblo';
  25.         else {
  26.             element.innerHTML = 'Blabla';
  27.         }
  28.     }
  29. }
  30. </script>
  31. <a id="element1" onClick="javascript:changeText(1)">Blabla</a></div>

Reply

Marsh Posté le 04-03-2015 à 12:12:39   

Reply

Marsh Posté le 04-03-2015 à 14:54:24    

Bon je n'ai pas de solution parfaite mais concernant l'intégration de mon code y a plusieurs choses à revoir.  
 
Tout d'abord tu as mis src="audioplayer" ça ne va pas il faut que ce soit id="audioplayer"
 
Ensuite la partie concernant la source audio est peu claire, la balise audio est déjà un embed spécialisé alors rajouté un embed à l'intérieur ça me parait bizarre (note: je ne connais pas bien l'utilisation de embed), ton lien pour ta source est un lien de téléchargement pas un lien direct vers ton fichier donc ça a peu de chance de marcher.
 
Enfin tu as un script pour changer ton texte qui semble un peu complexe, mon script aurait suffit si tu avais mis l'id "testonclick" dans ta balise <a> et avec Blabla correspondant à ma condition
ex : (document.getElementById("testonclick" ).innerHTML=='Blabla').
 
Cordialement

Reply

Marsh Posté le 04-03-2015 à 20:46:10    

Je n'ai pas réussi à trouver quoi que ce soit pour héberger mon fichier audio avec un lien direct...
 
Après, j'ai remplacé l'id de la balise a, mais je ne vois pas à quel niveau intégrer la nouvelle condition pour que le texte fonctionne...
Du coup, voilà ce que ça donne :
 

Code :
  1. <script type="text/javascript">document.getElementById("testonclick" ).onclick=function(){
  2.     if (document.getElementById("testonclick" ).innerHTML=='play'){
  3.       document.getElementById("testonclick" ).innerHTML='stop';
  4.       document.getElementById("audioplayer" ).pause();
  5.     }
  6.     else{
  7.       document.getElementById("testonclick" ).innerHTML='play';
  8.       document.getElementById("audioplayer" ).play();
  9.     }
  10.     } </script>
  11.     <audio id="audioplayer" controls>
  12.     <embed
  13.     src="http://dl.free.fr/jy2PIfxAi"
  14.     width="180"
  15.     height="90"
  16.     loop="true"
  17.     autostart="true" />
  18.     </audio>
  19.     <div id="testonclick">
  20.     <script language="javascript">
  21.     function changeText(idElement) {
  22.         var element = document.getElementById('element' + idElement);
  23.         if (idElement === 1 || idElement === 2) {
  24.             if (element.innerHTML === 'Blabla') element.innerHTML = 'Bloblo';
  25.             else {
  26.                 element.innerHTML = 'Blabla';
  27.             }
  28.         }
  29.     }
  30.     </script>
  31.     <a id="testonclick" onClick="javascript:changeText(1)">Blabla</a></div>


Message édité par ciol59 le 04-03-2015 à 21:00:07
Reply

Marsh Posté le 06-03-2015 à 13:04:08    

Cadeau :
 

Citation :


<audio id="player" autoplay>
  <source src="http://kranack.ovh/uploads/song/FortBoyard.mp3" type="audio/mp3" />
</audio>
<div>
<a id="clickThisText" onClick="javascript:stopAudio(this)">Blabla</a></div>
<script language="javascript">
function stopAudio(element) {
  if (element.innerHTML === 'Blabla') {
    element.innerHTML = 'Bloblo';
    console.log('pause');
    document.getElementById("player" ).pause();
  }
  else {
    element.innerHTML = 'Blabla';
    console.log('play');
    document.getElementById("player" ).play();
  }
}
</script>

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed