Partage

Vidéo en 1 clic

Sujet résolu

Anonyme

27 octobre 2008 à 22:12:08

Salut,

Question : Comment fait t-on pour que une vidéo apparaisse quand t-on clique sur le titre ?

EX :

Épisode 01 ( on clique et hop la vidéo apparaît en dessous )
vidéo ( visible seulement quand on clique sur "Épisode 01" et disparaît quand on re clique )

Comme ici.

Qui peut m'aidez svp ?

Merci d'avance !

vyk12

27 octobre 2008 à 22:58:05

Regarde la source de la page, si tu as un minimum de connaissances en JS tu devrais comprendre facilement

Là ils mettent tous les liens. Chaque lien pointe vers une fonction JS : moreOn(episode). En dessous de chaque lien se trouve un <div> en display:none qui contient la vidéo (balise <object>). Son id est "nav_" + episode. La fonction moreOn() va chercher le div et passer le display:none en display:block (enfin ici ils mettent la valeur de display à "").

Anonyme

28 octobre 2008 à 2:41:19

Salut,

J'ai fait sa mais sa marche pas !

<script type="text/javascript">
1
2function moreOn(id)
3 {
4 if (document.getElementById("nav_"+id).style.display == ""){ show = "none"; }
5 else{ show = ""; }
6document.getElementById("nav_"+id).style.display = show;
7 }
8
</script>
<a href="javascript:moreOn(1)" title="">
<strong>
<font face="Times New Roman" size="3" color="#000000">Episode 01</font>
</strong>
</a>
<br/>
<div style="display: none;" id="nav_1" class="d_sublink"><strong><font face="Times New Roman"><font size="3"><font color="#000000">
<object height="351" width="432"><param value="http://www.megavideo.com/v/AD1R00CV9296c48de79a04f5979d65adf7857bd3.3619978099.0" name="movie"/><param value="transparent" name="wmode"/>
<embed height="351" width="432" wmode="transparent" type="application/x-shockwave-flash" src="http://www.megavideo.com/v/AD1R00CV9296c48de79a04f5979d65adf7857bd3.3619978099.0"/></object>
<script type="text/javascript" src="http://ads.allotraffic.com/clicstandart?id=16750"/><table cellspacing="1" cellpadding="0" style="border: 0px none ; margin: 0px; padding: 0px; background-color: rgb(198, 198, 198); width: 468px; height: 60px;"><tbody><tr><td width="100%" bgcolor="white" align="center" style="margin: 0px; padding: 0px;"><iframe frameborder="0" scrolling="no" style="border: 0px none ; height: 58px; width: 100%;" src="http://ads.allotraffic.com/clic_iframe_v?id=16750&amp;temp=S16750T1225140895C6768&amp;rd=7184&amp;r=http%3A%2F%2Fmangas39.free.fr%2Fnaruto_shippuuden_vf_423.htm&amp;r2=http://mangas39.free.fr/anime_vf_n_484.htm" name="clic_iframe_v_S16750T1225140895C6768"/></td><td width="15" align="center" style="margin: 0px; padding: 0px; background-color: rgb(198, 198, 198);"><a href="http://www.allotraffic.com/?r=21432" target="_blank"><img width="12" border="0" heigh="58" src="http://www.allotraffic.com/img/vous_ici_clic_vert_.gif" title="AlloTraffic.com : Réseau publicitaire Clic et Pop" alt="AlloTraffic.com : Régie publicitaire Clic et Pop" style="border: 0px none ; height: 58px; width: 12px;"/></a></td></tr></tbody></table>
</font></font></font></strong></div>

leoster

28 octobre 2008 à 9:48:36

sa va peut etre t'aider :

<script type="text/javascript">
  <!--
  var mediateur = 0; //On annonce la valeur initiale de notre variable
  function changer_texte()
  {
   if(mediateur == 0)
   {
    document.getElementById("test-javascript").innerHTML = '<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/goh55gkv-iE&hl=fr&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/goh55gkv-iE&hl=fr&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>';
    mediateur = 1;
   }
   else
   {
    document.getElementById("test-javascript").innerHTML = 'episode 1;';
    mediateur = 0;
   }
  }
  -->
  </script>
  </head>
  <body>

<div onClick="javascript:changer_texte();" id="test-javascript">episode 1</div>

Anonyme

28 octobre 2008 à 10:25:00

Merci sa marche quand je le fais avec une vidéo de megavidéo mais avec une playlist de WAT sa marche pas :euh:

<!-- début du code -->
<script type="text/javascript">
  <!--
  var mediateur = 0; //On annonce la valeur initiale de notre variable
  function changer_texte()
  {
   if(mediateur == 0)
   {
    document.getElementById("test-javascript").innerHTML = '<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/goh55gkv-iE&hl=fr&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/goh55gkv-iE&hl=fr&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>';
    mediateur = 1;
   }
   else
   {
    document.getElementById("test-javascript").innerHTML = 'episode 1;';
    mediateur = 0;
   }
  }
  -->
  </script>
  </head>
  <body>

<div onClick="javascript:changer_texte();" id="test-javascript">episode 1</div>

<!--  fin du code -->
<!-- début de vidéo -->
    <div>
        <object width='540' height='500'>
		<param name='movie' value='http://www.wat.tv/swf2/282774c0dVjhH1428307/1427769'/>
		<param name='allowScriptAccess' value='always' />
		<param name='allowFullScreen' value='true' />
		<param name='FlashVars' value='modeType=custom'/>
		<embed src='http://www.wat.tv/swf2/282774c0dVjhH1428307/1427769'type='application/x-shockwave-flash' width='540' height='500' FlashVars='modeType=custom'  allowScriptAccess='always' allowFullScreen='true'>
		</embed>
		</object>
	</div>
<!-- fin de vidéo -->

Edité : Sa marche mais les vidéo sont apparente quand on va sur la page alors que sa ne devrais pas.

vyk12

28 octobre 2008 à 13:21:05

Ton code n'est pas du Java mais du JavaScript

Et du moment que tu mets du HTML dedans (sauf dans du code JavaScript), il faut que tu mettes ton code entre les balises <code type="html"></code> , le magnifique script du Site du Zér0 est assez intelligent pour colorer le JS qui se trouve entre les balises <script></script>

J'en reviens au code : voici comment tu pourrais faire :

<script type="text/javascript">
<!--
	function showVideo(id)
	{
		document.getElementById('div' + id).style.display = (document.getElementById('div' + id).style.display == 'block') ? 'none' : 'block';
	}
	
	function hide()
	{
		var div = document.getElementsByTagName('div');
		for(var i = 0; i < div.length; i++)
		{
			if(div[i].className == 'hide')
				div[i].style.display = 'none';
		}
	}
//-->
</script>
<a href="javascript:showVideo(1);">Episode 1</a>
<div id="div1" class="hide">
	<object width='540' height='500'>
		<param name='movie' value='http://www.wat.tv/swf2/282774c0dVjhH1428307/1427769'/>
		<param name='allowScriptAccess' value='always' />
		<param name='allowFullScreen' value='true' />
		<param name='FlashVars' value='modeType=custom'/>
		<embed src='http://www.wat.tv/swf2/282774c0dVjhH1428307/1427769'type='application/x-shockwave-flash' width='540' height='500' FlashVars='modeType=custom'  allowScriptAccess='always' allowFullScreen='true'>
		</embed>
	</object>
</div><br />
<a href="javascript:showVideo(2);">Episode 2</a>
<div id="div2" class="hide">
	<object width='540' height='500'>
		<param name='movie' value='http://www.wat.tv/swf2/282774c0dVjhH1428307/1427769'/>
		<param name='allowScriptAccess' value='always' />
		<param name='allowFullScreen' value='true' />
		<param name='FlashVars' value='modeType=custom'/>
		<embed src='http://www.wat.tv/swf2/282774c0dVjhH1428307/1427769'type='application/x-shockwave-flash' width='540' height='500' FlashVars='modeType=custom'  allowScriptAccess='always' allowFullScreen='true'>
		</embed>
	</object>
</div>
<script type="text/javascript">
<!--
	hide();
//-->
</script>

Je ne fais pas de window.onload = hide; car si tu as beaucoup d'éléments sur ta page qui doivent être chargés, il faut attendre le chargement complet de la page pour cacher les div et ça risque de prendre du temps

Anonyme

28 octobre 2008 à 13:40:32

Salut,

Sa marche mais les vidéos sont apparente quand on va sur la page alors que sa ne devrais pas, la vidéo doit apparaitre uniquement quand on clique sur le titre.

vyk12

28 octobre 2008 à 13:46:00

J'ai testé en local et ça a marché, tu peux nous donner un lien vers ta page ? Tu as sans doute fait une erreur dans le copier/coller ...

Anonyme

28 octobre 2008 à 13:54:12

voilà :

http://dragonblack95.free.fr/episodes.php

vyk12

28 octobre 2008 à 16:12:42

C'est normal, tu n'appelles pas la fonction hide() que je t'ai donnée. Ajoute ce bout de code juste avant la fermeture de la balise body :

<script type="text/javascript">
<!--
    hide();
//-->
</script>

Tout simplement

Anonyme

28 octobre 2008 à 16:39:30

Merci sa marche super bien ! [Résolu]

PS : comment tu a fait pour changez le soulignement de texte dans ton site stp ?

leoster

28 octobre 2008 à 19:56:59

on peut pas voir ton code source .
quel code a tu mis pour pas voir ton code source ???

Anonyme

28 octobre 2008 à 20:05:40

LOL je sais pas j'ai rien de spécial.

wilkilol

28 octobre 2008 à 20:09:20

salut moi j'ai fait sa sa marche très bien juste un truc c'est que lorsqu'on clique sur le lien au remonte en haut de la page et sa devient gênant quand il y a plein d'épisodes :

<SCRIPT LANGUAGE="JavaScript">

var txt=new Array () ;

txt[61]='<div class="video"><embed src="http://www.veoh.com/videodetails2.swf?permalinkId=v4867706NmfK8Jwq&id=10714497&player=videodetailsembedded&videoAutoPlay=0" allowFullScreen="true" width="540" height="438" bgcolor="#FFFFFF" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></div>';
			
function menu(id)
{
ref=document.getElementById(id);
if (ref.innerHTML== "")
ref.innerHTML = txt[id];
else
ref.innerHTML= "";
}
			
</SCRIPT>

<ul>
<li><a href=# onClick="menu(1.1);">One Piece Episode 61 Vostfr </a></li>
<div id=1></div>

Anonyme

28 octobre 2008 à 20:16:44

Salut, essaye sa wilkilol sa t'évitera de remonter en haut de la page a chaque fois!

Code entre <head>

<script type="text/javascript">
<!--
	function showVideo(id)
	{
		document.getElementById('div' + id).style.display = (document.getElementById('div' + id).style.display == 'block') ? 'none' : 'block';
	}
	
	function hide()
	{
		var div = document.getElementsByTagName('div');
		for(var i = 0; i < div.length; i++)
		{
			if(div[i].className == 'hide')
				div[i].style.display = 'none';
		}
	}
//-->
</script>

Video :

<a href="javascript:showVideo(2);">Episode 1</a>	
    <div id="div2" class="hide">
        <object width="430" height="358">
        <param name="movie" value="http://www.wat.tv/swf2/192592Si3svGR1428307" />
        <param name="allowScriptAccess" value="always" />
        <param name="allowFullScreen" value="true" />
        <embed src="http://www.wat.tv/swf2/103029jGXGH1h1428307" type="application/x-shockwave-flash" width="430" height="358" allowScriptAccess="always" allowFullScreen="true"></embed>
        </object>
    </div>
<script type="text/javascript">
<!--
    hide();
//-->
</script>

wilkilol

28 octobre 2008 à 20:25:36

excuse moi mais le 2 signifie quoi dans :

<a href="javascript:showVideo(2);">Episode 1</a>

Anonyme

28 octobre 2008 à 20:44:49

ah c'est l'id c'était pour ma 2eme vidéo donc si tu a plusieurs vidéo sur la même page tu change le "2" par "3"
pour ta 3eme vidéo et donc si tu change a cette endroit il faut change la ligne du dessous :

<a href="javascript:showVideo(2);">Episode 2</a>
<div id="div2" class="hide">

donc quand mais plusieurs vidéo tu change ces deux chiffres par un autre ex :

<a href="javascript:showVideo(3);">Episode 3</a>
<div id="div3" class="hide">

Voilà j'espère t'avoir aidez si ta besoin exite pas !

wilkilol

28 octobre 2008 à 21:03:43

ah ok merci beaucoup

Anonyme

28 octobre 2008 à 22:01:08

De rien !

vyk12

29 octobre 2008 à 21:42:21

Sinon tu peux faire comme ça :

<a href="#" onclick="javascript:showVideo(2);return false;">Episode 2</a>

Le fait de retourner false à un événement a pour effet de l'annuler, donc là ça annule le clic, donc le navigateur ne suit pas le lien (donc ne remonte pas en haut)

Vidéo en 1 clic

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Vidéo en 1 clic

Vidéo en 1 clic

Supprimer

Modérer

Signaler le message aux modérateurs