HTML5 lire plusieurs video dans un lecteur

Résolu
angelus1821 Messages postés 191 Date d'inscription   Statut Membre Dernière intervention   -  
tedfrancoeur Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -
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   Statut Membre Dernière intervention   16
 
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   Statut Membre Dernière intervention   425
 
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   Statut Membre Dernière intervention  
 
merci pour ton code il est super simple et bon
0
Réponse 3 / 4
scriptiz Messages postés 1424 Date d'inscription   Statut Membre Dernière intervention   425
 
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
 
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   Statut Membre Dernière intervention   16
 
un grand merci , ça marche !!! j'ai compris comment ça fonctionne maintenant !!
0