[HTML] Vidéo cachée

Résolu/Fermé
Ooda Messages postés 58 Date d'inscription vendredi 23 octobre 2009 Statut Membre Dernière intervention 5 juin 2010 - 23 oct. 2009 à 21:45
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 - 24 oct. 2009 à 18:55
Bonjour,

Tout d'abord j'ai un hébergeur perso : https://www.ionos.fr/

Et j'ai mon site que j'ai commencer il y a 1 mois. http://animesgratuits.com/one.html
Je voudrait savoir le code pour que lorsque l'on clique sur "Episode 1", la vidéo s'affiche en dessous sans ouvrir une autre page puis lorsque l'on reclique sur "Episode 1", elle disparaisse. J'avais deja vu ça dans un site .

Pourriez vous m'aider SVP
Merci d'avance

6 réponses

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 504
23 oct. 2009 à 22:25
Voici pour la structure XHTML :
<a href="#" onclick="return openMovie('video_0');">Vidéo 1</a>
<div id="video_0" class="video">
  <!-- Code de la vidéo 1 -->
</div>
<a href="#" onclick="return openMovie('video_1');">Vidéo 2</a>
<div id="video_1" class="video">
  <!-- Code de la vidéo 2 -->
</div>
<a href="#" onclick="return openMovie('video_2');">Vidéo 3</a>
<div id="video_2" class="video">
  <!-- Code de la vidéo 3 -->
</div>
...
Ensuite, pour faire l'effet "déroulement" vers le bas, tu peux utiliser une bibliothèque Javascript comme JQuery (ou Prototype, Script.aculo.us, ...). Dis moi si tu souhaites en utiliser une ou pas et je te donnerai la suite.
0
Ooda Messages postés 58 Date d'inscription vendredi 23 octobre 2009 Statut Membre Dernière intervention 5 juin 2010 3
24 oct. 2009 à 16:33
Bonjour, J'aimerai bien en utiliser une s'il te plait pourrai tu donner la suite s'il te plait ?
0
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 504
24 oct. 2009 à 16:51
Voilà la structure :
<a href="video_1" class="open">Vidéo 1</a><br/>
<div id="video_1" class="video">
  <img src="http://www.google.be/intl/en_com/images/logo_plain.png" alt="" />
</div>

<a href="video_2" class="open">Vidéo 2</a><br/>
<div id="video_2" class="video">
  <img src="http://www.google.be/intl/en_com/images/logo_plain.png" alt="" />
</div>

<a href="video_3" class="open">Vidéo 3</a><br/>
<div id="video_3" class="video">
  <img src="http://www.google.be/intl/en_com/images/logo_plain.png" alt="" />
</div>
Ajoute ça entre <head> et </head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript"><!--
	$(document).ready(function() {
		$(".video").hide();
		$("a.open").click(function() {
			var id_video = '#' + $(this).attr('href');
			$('.video').slideUp('fast');
			$(id_video).slideDown('fast');
			return false;
		});
	});
// --></script>
0
Ooda Messages postés 58 Date d'inscription vendredi 23 octobre 2009 Statut Membre Dernière intervention 5 juin 2010 3
24 oct. 2009 à 16:56
C'est génial merci beaucoup ! 1er sujet sur ce forum et déjà satisfait =)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Ooda Messages postés 58 Date d'inscription vendredi 23 octobre 2009 Statut Membre Dernière intervention 5 juin 2010 3
24 oct. 2009 à 18:50
Je l'ai fait mais j'ai un petit probleme quand ca charge, regardez ! =S
http://animesgratuits.com/air.html
0
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 504
24 oct. 2009 à 18:55
Je ne vois rien ...
Pour faire plus esthétique, retires les bulles avant les liens (sur les "li").
Par contre, je te préviens avant, quand le visiteur changera de vidéo, la vidéo en lecture continuera.
La seule solution pour la stopper et que ton lecteur aies un API Javascript (comme JW Player).
0