Sujet Précédent Sujet Suivant

HTML5 lire plusieurs video dans un lecteur

Résolu/Fermé
angelus1821 Messages postés 191 Date d'inscription dimanche 16 mars 2008 Statut Membre Dernière intervention 21 décembre 2014 - Modifié par angelus1821 le 25/04/2012 à 13:14
tedfrancoeur Messages postés 1 Date d'inscription samedi 7 mars 2015 Statut Membre Dernière intervention 7 mars 2015 - 7 mars 2015 à 22:50
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 !

A voir également:

4 réponses

Réponse 1 / 4
angelus1821 Messages postés 191 Date d'inscription dimanche 16 mars 2008 Statut Membre Dernière intervention 21 décembre 2014 16
Modifié par angelus1821 le 25/04/2012 à 17:31
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
Réponse 2 / 4
scriptiz Messages postés 1424 Date d'inscription dimanche 21 décembre 2008 Statut Membre Dernière intervention 14 septembre 2023 425
Modifié par scriptiz le 26/04/2012 à 00:44
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
1
tedfrancoeur Messages postés 1 Date d'inscription samedi 7 mars 2015 Statut Membre Dernière intervention 7 mars 2015
7 mars 2015 à 22:50
merci pour ton code il est super simple et bon
0
Réponse 3 / 4
scriptiz Messages postés 1424 Date d'inscription dimanche 21 décembre 2008 Statut Membre Dernière intervention 14 septembre 2023 425
Modifié par scriptiz le 25/04/2012 à 15:23
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
0
JemsGodo
Modifié par JemsGodo le 18/02/2013 à 11:05
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
0
Réponse 4 / 4
angelus1821 Messages postés 191 Date d'inscription dimanche 16 mars 2008 Statut Membre Dernière intervention 21 décembre 2014 16
26 avril 2012 à 20:41
un grand merci , ça marche !!! j'ai compris comment ça fonctionne maintenant !!
0