[HTML] Vidéo cachée

Résolu
Ooda Messages postés 58 Date d'inscription   Statut Membre Dernière intervention   -  
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   -
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

Réponse 1 / 6
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
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
Réponse 2 / 6
Ooda Messages postés 58 Date d'inscription   Statut Membre Dernière intervention   3
 
Bonjour, J'aimerai bien en utiliser une s'il te plait pourrai tu donner la suite s'il te plait ?
0
Réponse 3 / 6
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
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
Réponse 4 / 6
Ooda Messages postés 58 Date d'inscription   Statut Membre Dernière intervention   3
 
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
Réponse 5 / 6
Ooda Messages postés 58 Date d'inscription   Statut Membre Dernière intervention   3
 
Je l'ai fait mais j'ai un petit probleme quand ca charge, regardez ! =S
http://animesgratuits.com/air.html
0
Réponse 6 / 6
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
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