HTML5 lire plusieurs video dans un lecteur [Résolu/Fermé]

Signaler
Messages postés
193
Date d'inscription
dimanche 16 mars 2008
Statut
Membre
Dernière intervention
21 décembre 2014
-
tedfrancoeur
Messages postés
1
Date d'inscription
samedi 7 mars 2015
Statut
Membre
Dernière intervention
7 mars 2015
-
Bonjour,
j'ai un soucis, j'ai un lecteur video dans lequel je voudrais lire plusieurs videos, a chaque fois que l'on clique sur un lien, voici mon code:
<div> 
 <ul id="maListe"> 
 <li><a href="video/ff7.mp4" rel="player" >Final fantasy 7</a></li> 
 <li><a href="video/ff8.mp4" rel="player" >Final fantasy 8</a></li> 
 <li><a href="video/ff9" rel="player">Final fantasy 9</a></li> 
 </ul> 
 </div> 

 <video id="player" width="400" height="400"  controls="controls" > 
 <source  src="video/ff7.mp4" type="video/mp4" /> 
 </video> 

lorsque je clique sur le lien Final fantasy 7 , j'ai la video sur ff7 qui se lance, mais si je veux voir la video sur final fantasy 9, j'ai la video de ff9 qui se charge dans le meme lecteur.
Avec ce code, quand je charge ma page, la video de ff7 est chargé, mais si je clique sur un lien, j'ai ma page qui devient noir et la video concerné se lance et je voudrais seulement que le lecteur change la video, seul la video doit changer et non toute ma page, comment faut-il faire ?
un grand merci pour votre aide !

4 réponses

Messages postés
193
Date d'inscription
dimanche 16 mars 2008
Statut
Membre
Dernière intervention
21 décembre 2014
14
merci, la video ne se charge pas :s
j'ai mon lecteur, avec la video ff7.mp4 qui est prête à être lancé, mais rien ne se passe lorsque je clique sur les autres liens :s
3
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 75638 internautes nous ont dit merci ce mois-ci

Messages postés
1420
Date d'inscription
dimanche 21 décembre 2008
Statut
Membre
Dernière intervention
14 mai 2013
406
Ooops déso, voici une version qui fonctionne chez moi, mais il faut que les fichiers vidéo soient dans le même dossier que la page html.

Sinon change les noms des videos en ajoutant video/ devant 2012-03....mp4 dans les balises <a> si tu veux mettre dans un sous dossier :)

<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/javascript">
function changeVideo(newUrl) {
  var video = document.getElementById("player");
  video.src = newUrl;
  video.load();
  video.play();
}
</script>
</head>
<body>
<div> 
  <ul id="maListe"> 
    <li><a href="javascript:changeVideo('2012-03-03 16.26.40.mp4');" rel="player" >
	Final fantasy 7</a></li> 
    <li><a href="javascript:changeVideo('2012-02-18 00.48.40.mp4');" rel="player" >
	Final fantasy 8</a></li> 
    <li><a href="javascript:changeVideo('2011-12-18 02.10.54.mp4');" rel="player">
	Final fantasy 9</a></li> 
  </ul> 
</div> 

  <video id="player" width="400" height="400" controls="controls"> 
    <source id="video_src" src="2012-03-03 16.26.40.mp4" type="video/mp4" />
  </video> 
</body>
</html>


Sinon remplacer "player" par "video_src".
"The most successful method of programming is to begin a program as simply as possible, test it, and then add to the program until it performs the required job." -- PDP8 handbook, Pg 9-64
tedfrancoeur
Messages postés
1
Date d'inscription
samedi 7 mars 2015
Statut
Membre
Dernière intervention
7 mars 2015

merci pour ton code il est super simple et bon
Messages postés
1420
Date d'inscription
dimanche 21 décembre 2008
Statut
Membre
Dernière intervention
14 mai 2013
406
Essaye ceci :

<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/javascript">
function changeVideo(newUrl) {
  document.getElementById("video_src").setAttribute("src", newUrl);
}
</script>
</head>
<body>
<div> 
  <ul id="maListe"> 
    <li><a href="javascript:changeVideo('video/ff7.mp4');" rel="player" >
	Final fantasy 7</a></li> 
    <li><a href="javascript:changeVideo('video/ff8.mp4');" rel="player" >
	Final fantasy 8</a></li> 
    <li><a href="javascript:changeVideo('video/ff9.mp4');" rel="player">
	Final fantasy 9</a></li> 
  </ul> 
</div> 

  <video id="player" width="400" height="400" controls="controls"> 
    <source id="video_src" src="video/ff7.mp4" type="video/mp4" />
  </video> 
</body>
</html>

"The most successful method of programming is to begin a program as simply as possible, test it, and then add to the program until it performs the required job." -- PDP8 handbook, Pg 9-64
bonjour ce code m'a l'air simple et efficace, c'est pourquoi, comme je cherche à faire la même chose sur mon portfolio, j'essayé d'adapter le code avec mon site mais ça ne marche pas... :'(

voici mon code :

<html> 
<head> 
 <title>Test</title> 
 <script language="JavaScript" type="text/javascript"> 
 function changeVideo(newUrl) { 
   document.getElementById("video_src").setAttribute("src", newUrl); 
 } 
 </script> 
</head> 


<body> 
 <div class="gabarit-video"> 
  <video id="player" controls preload="auto" poster="videos/img_video_4.png" onclick="this.play();">  
   <source id="video_src" src="videos/video_4.webm" type="video/webm" /> 
   <source id="video_src" src="videos/video_4.mp4" type="video/mp4" /> 
   <source id="video_src" src="videos/video_4.ogg" type="video/ogg" /> 
   <source id="video_src" src="videos/video_4_iphone.mp4" type="video/mp4" /> 
  </video> 
 </div> 
 <div>  
  <ul>  
   <li class="choix-video"><a href="javascript:changeVideo('videos/video_4.webm');" rel="player" >vidéo 1</a></li>  
   <li class="choix-video"><a href="javascript:changeVideo('videos/video_3.webm');" rel="player" >vidéo 2</a></li>  
   <li class="choix-video"><a href="javascript:changeVideo('videos/video_2.webm');" rel="player">vidéo 3</a></li>  
  </ul>  
 </div> 
</body> 
</html>  


La vidéo de base sur le player fonctionne mais les boutons ne lancent rien... Quelqu sait pourquoi ?
Cordialement,
Jérémy
Messages postés
193
Date d'inscription
dimanche 16 mars 2008
Statut
Membre
Dernière intervention
21 décembre 2014
14
un grand merci , ça marche !!! j'ai compris comment ça fonctionne maintenant !!