11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Galerie/album vidéo

Bonjour,
j'aimerai créer en javascript une galerie vidéo un peu comme pour les photos mais avec des vidéos en .flv.
Pour cela, je me suis inspiré du tutorial d'alsacréation Une galerie d'images simple avec jQuery

Voilà mon problème :

Sous firefox :
j'arrive à charger la première vidéo dans le lecteur vidéo mais rien ne se passe quand je clique sur les autres images.

Sous IE 7 :
il n'affiche même pas le lecteur vidéo avec la première vidéo.

Voici les codes htms et javascript. Je ne sais pas ce qui bloque, je viens de découvrir le javascript.

Merci pour votre aide Smiley smile 

<!DOCTYPE html>
<html>
<head>
  <script src="jquery-1.4.2.js"></script>
<script src="galerie2.js" type="text/javascript"></script>
</head>
<body>
<ul id="thumbs"> 
  <li> 
<a href="video1.flv"> 
      <img alt="Photo grand format d'une famille de Bernaches du Canada" 
        src="images/small/image1.jpg" /> 
    </a> 
  </li> 
  <li> 
<a href="video2.flv"> 
      <img alt="Photo grand format d'un sous bois" 
        src="images/small/image2.jpg" /> 
    </a> 
  </li> 
</ul>
 
</body>
</html>


jQuery(function($){ 
				
	 var settings = { 
    thumbListId: "thumbs", 
    playerId: "player"
  }; 
    var thumbLinks = $("#"+settings.thumbListId).find("a");
    firstThumbLink = thumbLinks.eq(0);
	
  $("#"+settings.thumbListId).before( 
    $(document.createElement("object")) 
	.attr({
    	id:settings.playerId, 
      	classid:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",
      	name:"player",  
      	width:"400",
	  	height:"315"
	})
	.append($(document.createElement("param")).attr({
		  name:"movie",
		  value:"player.swf"}))
	.append($(document.createElement("param")).attr({
		  name:"allowfullscreen",
		  value:"true"}))
	.append($(document.createElement("param")).attr({
		  name:"flashvars",
		  value:"player.swf"}))
	.append($(document.createElement("param")).attr({
		  name:"movie",
		  value:"file="+firstThumbLink.attr("href")}))
	.append($(document.createElement("embed")).attr({ 
          type: "application/x-shockwave-flash", 
          id:"player2",
		  name:"player2",
		  src:"player.swf",
		  width:"400",
		  height:"315",
		  allowscriptaccess:"always",
		  allowfullscreen:"true",
		  flashvars:"file="+firstThumbLink.attr("href"),
	}))
  );
	
  var player = $("#"+settings.playerId), 
    playerFirefox = player.children("embed"); 

thumbLinks.click(function(e){ 
	var event = e || window.e;
	if (event.preventDefault) {
   		event.preventDefault(); 
	}
   event.returnValue = false;
    var $this = $(this), 
      target = $this.attr("href"); 
    if (player.attr("data") == target) return;
	else {
		playerFirefox.attr("flashvars","file="+target);
	}
  });

Modifié par Wyatt (18 Aug 2010 - 14:33)
re bonjour,
mon post n'a pas l'air d'attirer la foule ^^.

Bon j'ai réussi à faire ce que je voulais mais d'une autre façon, en utilisant du php. C'est bourrin et moche avec plusieurs inconvénients mais ça marche.

Voici mon code pour ceux que ça intéresse : 


	<?php

	if (isset($_GET["page"])) $page = $_GET["page"];
	else $page = -1;

	switch ($page) {
	case 0 : include("video1.html"); break;
	case 1 : include("video2.html"); break;
	case 2 : include("video3.html"); break;
	case 3 : include("video4.html"); break;
	default : include("video1.html"); break;
	}
	?>


Inconvénient : je dois recréer une nouvelle page pour chaque vidéo et à chaque fois toute la page est rechargée.


<div class="bouton" id="precedent"> <a href=""><img src="images/precedent.jpg" /></a></div>
<ul id="thumbs"> 
  <li> 
<a href="test2.php?page=0"> 
      <img alt="Photo grand format d'une famille de Bernaches du Canada" 
        src="images/small/NDS0046P.jpg" /> 
    </a> 
  </li> 
  <li> 
<a href="test2.php?page=1"> 
      <img alt="Photo grand format d'un sous bois" 
        src="images/small/NDS0047P.jpg" /> 
    </a> 
  </li> 
  <li> 
<a href="test2.php?page=2"> 
      <img alt="Photo grand format d'un sous bois" 
        src="images/small/NDS0021P.jpg" /> 
    </a> 
  </li> 
  <li> 
<a href="test2.php?page=3"> 
      <img alt="Photo grand format d'un sous bois" 
        src="images/small/NDS0022P.jpg" /> 
    </a> 
  </li> 
</ul>
<div class="bouton" id="suivant"> <a href=""><img src="images/suivant.jpg" /></a></div>


Le code ci-dessous me permet la navigation des petites images pour sélectionner la vidéo et qu'à chaque vidéo, la petite image correspondante soit centrée.

<?php
function transfertVarJS($varPHP, $varJS){
   echo "var ".$varJS."= '".$varPHP."';";
   return;
}

 echo '<script>
	var boutonSuivant = $("#suivant");
	var boutonPrecedent = $("#precedent");

	var tabThumbs = new Array();
	tabThumbs= document.getElementsByTagName("li");';
	
	transfertVarJS($page, "varJS");
	echo '
	var min=0;
	var max=2;
	if(tabThumbs.length>3 && varJS !=0) {
		if(varJS == tabThumbs.length-1) {
			min = tabThumbs.length-3;
			max = tabThumbs.length-1;
		} 
		else {
			max = parseInt(varJS) +1;
			min = parseInt(varJS) -1;	
		}
	}
	
	for (i=0; i<tabThumbs.length; i++) {
		if(i>=min && i<=max)
		tabThumbs[i].className = "visible";
		else tabThumbs[i].className = "hidden";
	}
	
boutonSuivant.click(function(e){ 
	var event = e || window.e;
	if (event.preventDefault) {
   		event.preventDefault(); 
	}
   event.returnValue = false;
   if(max <tabThumbs.length-1) {
   	max++;
   	min++;
   }
   for (i=0; i<tabThumbs.length; i++) {
		if(i>=min && i<=max)
		tabThumbs[i].className = "visible";
		else tabThumbs[i].className = "hidden";
	}
  }); 

boutonPrecedent.click(function(e){ 
	var event = e || window.e;
	if (event.preventDefault) {
   		event.preventDefault(); 
	}
   event.returnValue = false;
   if(min>0) {
   	max--;
   	min--;
   }
   for (i=0; i<tabThumbs.length; i++) {
		if(i>=min && i<=max)
		tabThumbs[i].className = "visible";
		else tabThumbs[i].className = "hidden";
	}
  }); 
  
</script>';

?>



Bien sur si quelqu'un a une idée sur mon code javascript (dans le post plus haut) je suis preneur. On m'a dit que je devrais utiliser Ajax pour pouvoir recharger la vidéo mais je ne sais pas du tout comment ça marche.[/i][/i][/i][/i][/i][/i]
Modifié par Wyatt (06 Aug 2010 - 10:36)
Je vais enfin pouvoir clore ce thread Smiley smile .

Pour la galerie de vidéo, j'ai principalement utilisé Jquery et ses fonctions Ajax.
Le code ci-dessous permet d'avoir une vidéo chargé lors du chargement de la page avec des petites vignettes en dessous. Lorsque l'on clique sur une des vignettes, la vidéo est automatiquement chargée dans le lecteur (uniquement la vidéo, pas le reste de la page).


Voici le code Html : 


<div id="lecteur">

</div>


<div id="vignette">
<a id="precedent" href=""></a>
<ul id="thumbs"> 
  <li> 
<a href="videos/video1.flv&width=604"> video1
    </a> 
  </li> 
  <li> 
<a href="videos/video2.flv&width=604"> video2
    </a> 
  </li> 
  <li> 
<a href="videos/video3.flv&width=460"> video3		
    </a> 
  </li> 
  <li> 
<a href="videos/video4.flv&width=604"> video4		
    </a> 
  </li> 
</ul>
<a id="suivant" href=""></a>

</div>

<script>
	var boutonSuivant = $("#suivant");
	var boutonPrecedent = $("#precedent");
	var thumbLinks = $("#thumbs").find("a");
	firstThumbLink = thumbLinks.eq(0); 
	var tabThumbs= document.getElementById('thumbs').getElementsByTagName('li');
	
	// chargement de la première vidéo
	$.ajax({
   		type: "POST",
   		url: "ajaxvideo.php",
		data: "value="+firstThumbLink.attr("href"),
   		error:function(msg){
     	alert( "Error !: " + msg );
   },
   success: function(feedback){ 
        $('#lecteur').html(feedback); 
    }});
		
	// numéro des images à afficher.
	var min=0;
	var max=2;
	for (i=0; i<tabThumbs.length; i++) {
		if(i>=min && i<=max)
		tabThumbs[i].className = "visible";
		else tabThumbs[i].className = "hidden";
	}
	
//lorsque l'on clique sur les boutons suivants et précédents ça change les vignettes à afficher
boutonSuivant.click(function(e){ 
	var event = e || window.e;
	if (event.preventDefault) {
   		event.preventDefault(); 
	}
   event.returnValue = false;
   if(max <tabThumbs.length-1) {
   	max++;
   	min++;
   }
   for (i=0; i<tabThumbs.length; i++) {
		if(i>=min && i<=max)
		tabThumbs[i].className = "visible";
		else tabThumbs[i].className = "hidden";
	}
  }); 

boutonPrecedent.click(function(e){ 
	var event = e || window.e;
	if (event.preventDefault) {
   		event.preventDefault(); 
	}
   event.returnValue = false;
   if(min>0) {
   	max--;
   	min--;
   }
   for (i=0; i<tabThumbs.length; i++) {
		if(i>=min && i<=max)
		tabThumbs[i].className = "visible";
		else tabThumbs[i].className = "hidden";
	}
  }); 
  

//Lorsque l'on clique sur une vignette, ça charge la vidéo dans le lecteur
  thumbLinks.click(function(e){ 
	var event = e || window.e;
	if (event.preventDefault) {
   		event.preventDefault(); 
	}
   event.returnValue = false;
	var $this = $(this), 
    target = $this.attr("href"); 
	
	$.ajax({
   		type: "POST",
   		url: "ajaxvideo.php",
		data: "value="+target,
   		error:function(msg){
     	alert( "Error !: " + msg );
   },
   success: function(feedback){ 
        $('#lecteur').html(feedback); 
    }});
  }); 

</script>


ne pas oublier d'importer 
<script src="jquery-1.4.2.js"></script>
quelque part.

Maintenant voilà le css qui permettra de faire défiler les vignettes en dessous du lecteur :
Les boutons sont des images que j'ai mis dans le css.


#thumbs .hidden {display: none;}

#thumbs .visible {
	display: inline;
}
a#precedent  {
	float:left;
	display:inline;
	width:150px;
	height:100px;
	margin-top:5px;
	margin-left:30px;
	margin-right:25px;
	background:url(images/design_site/bouton_precedent.png);
}

a#suivant  {
	float:left;
	display:inline;
	width:150px;
	height:100px;
	margin-top:5px;
	margin-left:25px;
	background:url(images/design_site/bouton_suivant.png);
}


Il ne faut oublier le code php (ajaxvideo.php) qui enverra le lecteur avec la vidéo. Le fichier reçois 2 données dans le POST : l'url de la vidéo ($value) et la largeur de la vidéo ($width) pour des vidéos de largeurs différentes. On peut aussi envoyer la hauteur ainsi on a des vidéos de toutes tailles.

<?php
$value = $_POST['value'];
$width = $_POST['width'];
echo "<object id=\"player\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" name=\"player\" width=\"$width\" height=\"340\">
		<param name=\"movie\" value=\" player.swf\" />
		<param name=\"allowfullscreen\" value=\"true\" />
		<param name=\"allowscriptaccess\" value=\"always\" />
		<param id=\"paramvideo\" name=\"flashvars\" value=\"file=$value\" />
		<embed 
			type=\"application/x-shockwave-flash\"
			id=\"player2\"
			name=\"player2\"
			src=\"player.swf\" 
			width=\"$width\" 
			height=\"340\"
			allowscriptaccess=\"always\" 
			allowfullscreen=\"true\"
			flashvars=\"file=$value\"
		/>
	</object>";

?>
[/i][/i][/i][/i][/i][/i]
Modifié par Wyatt (18 Aug 2010 - 14:36)
Sujet clos
Aller à