Se connecter avec
S'enregistrer | Connectez-vous

Contrôle vidéo avec Javascript [Résolu]

Dernière réponse : dans Programmation

Bonjour !

Je réalise actuellement une petite galerie vidéos pour une école.

Je cherche activement un moyen de contrôler (au moins "Play" et "Stop") des vidéos via javascript.
Les vidéos sont au format QuickTime MP4 et je n'ai pas la possibilité d'utiliser Flash (FLV).

Actuellement la page vidéo se compose ainsi :

Un tableau dans lequel 4 vidéos son chargée via AJAX après un certain temps (setTimeOut).
La page appelée avec AJAX (chg.php) choisi aléatoirement une vidéo et l'affiche.
Lorsque l'on clique sûr une des vidéos cela renvoie une requête AJAX afin de changer la vidéo cliquée.

J'aurais besoin d'un moyen de lancer la lecture et de stopper la vidéo avec un lien ou un bouton contrôlé par javascript car je ne veux pas que les quatre vidéos se lancent simultanément...

videos.php
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
    

  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
    

  3. <head>
    

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    

  5. <title>Galerie - Visions du réel</title>
    

  6. <link rel='stylesheet' type='text/css' href='<a href="http://www.cepv.ch/elementsbase/styleCEPV.css" target="_blank">http://www.cepv.ch/elementsbase/styleCEPV.css</a>'>
    

  7. <script language="javascript">
    

  8. function charge_page(contener,contenu)
    

  9. {
    

  10. cont = document.getElementById(contener);
    

  11. cont.innerHTML = "";
    

  12. if(window.XMLHttpRequest) // FIREFOX
    

  13. xhr_object = new XMLHttpRequest();
    

  14. else if(window.ActiveXObject) // IE
    

  15. xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
    

  16. else
    

  17. return(false);
    

  18.  
  19. // CONTROLE DE L'ETAT DE LA REQUETE
    

  20. // CHAQUE CHANGEMENT D'ETAT AFFICHE UNE LIGNE
    

  21. xhr_object.onreadystatechange = function()
    

  22. {
    

  23. if(xhr_object.readyState == 4)
    

  24. {
    

  25.      cont.innerHTML = '';
    

  26.      // CONTROLE LE STATUS (ERREUR 404, ETC)
    

  27. if(xhr_object.status == 200)
    

  28.  
  29. cont.innerHTML += xhr_object.responseText;
    

  30. else
    

  31. cont.innerHTML +="Error code " + xhr_object.status;
    

  32. }
    

  33. };
    

  34.  
  35. // APPELLE LA PAGE
    

  36. xhr_object.open("GET", contenu, true);
    

  37. xhr_object.send(null);
    

  38.  
  39. }
    

  40. function loadandwait(){
    

  41.  
  42. setTimeout("charge_page('vid1', 'chg.php')",2000);
    

  43.  
  44. setTimeout("charge_page('vid2', 'chg.php')",4000);
    

  45.  
  46. setTimeout("charge_page('vid3', 'chg.php')",6000);
    

  47.  
  48. setTimeout("charge_page('vid4', 'chg.php')",8000);
    

  49. }
    

  50. </script>
    

  51. </head>
    

  52.  
  53. <body onload="loadandwait();">
    

  54. <a href="#" onclick="javascript:vids8.controls.play">TEST</a>
    

  55. <table width="661" border="0" align="center" cellpadding="0" cellspacing="1">
    

  56.   <tr>
    

  57.     <td><img src="<a href="http://www.cepv.ch/elementsbase/espaceur.gif" target="_blank">http://www.cepv.ch/elementsbase/espaceur.gif</a>" alt="a" border="0" height="10" width="109" /></td>
    

  58.     <td><img src="<a href="http://www.cepv.ch/elementsbase/espaceur.gif" target="_blank">http://www.cepv.ch/elementsbase/espaceur.gif</a>" alt="a" border="0" height="10" width="109" /></td>
    

  59.     <td valign="top"><img src="<a href="http://www.cepv.ch/elementsbase/espaceur.gif" target="_blank">http://www.cepv.ch/elementsbase/espaceur.gif</a>" alt="a" border="0" height="10" width="109" /></td>
    

  60.     <td valign="top"><img src="<a href="http://www.cepv.ch/elementsbase/espaceur.gif" target="_blank">http://www.cepv.ch/elementsbase/espaceur.gif</a>" alt="a" border="0" height="10" width="109" /></td>
    

  61.     <td valign="top"><img src="<a href="http://www.cepv.ch/elementsbase/espaceur.gif" target="_blank">http://www.cepv.ch/elementsbase/espaceur.gif</a>" alt="a" border="0" height="10" width="109" /></td>
    

  62.     <td valign="top"><img src="<a href="http://www.cepv.ch/elementsbase/espaceur.gif" target="_blank">http://www.cepv.ch/elementsbase/espaceur.gif</a>" alt="a" border="0" height="10" width="109" /></td>
    

  63.   </tr>
    

  64.   <tr>
    

  65.     <td height="105" colspan="3" valign="top"><a href="<a href="http://www.cepv.ch/" target="_blank">http://www.cepv.ch/</a>"><img src="<a href="http://www.cepv.ch/elementsbase/cepv_grisbl.gif" target="_blank">http://www.cepv.ch/elementsbase/cepv_grisbl.gif</a>" alt="a" align="middle" border="0" height="96" width="96" /></a><img src="<a href="http://www.cepv.ch/elementsbase/espaceur.gif" target="_blank">http://www.cepv.ch/elementsbase/espaceur.gif</a>" alt="a" align="middle" border="0" height="100" width="10" /><a href="<a href="http://www.cepv.ch/" target="_blank">http://www.cepv.ch/</a>"><img src="<a href="http://www.cepv.ch/elementsbase/CEPV.gif" target="_blank">http://www.cepv.ch/elementsbase/CEPV.gif</a>" alt="a" align="middle" border="0" height="96" width="188" /></a></td>
    

  66.     <td colspan="3" valign="bottom"><a href="<a href="http://www.cepv.ch/eaa/index.htm" target="_blank">http://www.cepv.ch/eaa/index.htm</a>"><img src="<a href="http://www.cepv.ch/elementsbase/ESAA.gif" target="_blank">http://www.cepv.ch/elementsbase/ESAA.gif</a>" alt="a" border="0" height="53" width="218" /></a></td>
    

  67.   </tr>
    

  68.   <tr>
    

  69.     <td colspan="3" valign="top"></td>
    

  70.     <td colspan="3"><span class="textegris"><a href="../index.htm"><img src="<a href="http://www.cepv.ch/elementsbase/flechenoiregauche.gif" target="_blank">http://www.cepv.ch/elementsbase/flechenoiregauche.gif</a>" alt="a" border="0" height="8" width="9" /> galeries</a></span></td>
    

  71.   </tr>
    

  72.   <tr>
    

  73.     <td colspan="6" align="left" valign="top" bgcolor="#cbc5b9"><table width="100%" border="0" cellpadding="0" cellspacing="10">
    

  74.       <tr>
    

  75.         <td><p class="titrenoir">Visions du réel - Vidéos</p>
    

  76.           </td>
    

  77.       </tr>
    

  78.     </table></td>
    

  79.   </tr>
    

  80.   <tr>
    

  81.     <td colspan="3" align="center" bgcolor="#CBC5B9"><div id="vid1" onclick="charge_page('vid1','chg.php');">
    

  82.  
  83.     </div></td>
    

  84.     <td colspan="3" align="center" bgcolor="#CBC5B9"><div id="vid2">
    

  85.  
  86.     </div></td>
    

  87.   </tr>
    

  88.   <tr>
    

  89.     <td colspan="3" align="center" bgcolor="#CBC5B9"><div id="vid3">
    

  90.  
  91. </div></td>
    

  92.     <td colspan="3" align="center" bgcolor="#CBC5B9"><div id="vid4">
    

  93.  
  94.     </div></td>
    

  95.   </tr>
    

  96. </table>
    

  97. <table width="661" border="0" align="center" cellpadding="0" cellspacing="1">
    

  98.   <tr>
    

  99.     <td colspan="2" class="textegrismini" align="left"><a href="<a href="http://www.cepv.ch" target="_blank">http://www.cepv.ch</a>">CEPV</a> - <a href="../../index.htm">Galeries</a> - <a href="index.htm">Vision du réél</a></td>
    

  100.     <td colspan="2" align="right" class="textegrismini"> mb
    

  101.  
  102.        -
    

  103.     <!-- #BeginDate format:Br1 -->15.04.08<!-- #EndDate --></td>
    

  104.   </tr>
    

  105. </table>
    

  106. </body>
    

  107. </html>


chg.php

  1. <?php
    

  2.  
  3. function makevid(){
    

  4.  
  5. 	$ex=0;
    

  6. 	$chk=0;
    

  7. 	while($chk==0){
    

  8.  
  9. 		while($ex!=15){
    

  10.  
  11. 			if($ex<14){	
    

  12.  
  13. 				$vu=$tmpnumvid.'.mp4';
    

  14. 				if($vu==$vidsvu[$ex]){
    

  15.  
  16. 					$chk=1;
    

  17. 					$ex=14;
    

  18. 				}
    

  19. 				else{
    

  20.  
  21. 					$chk=0;
    

  22. 					$ex++;
    

  23. 				}
    

  24. 			}
    

  25. 			else{
    

  26. 			$ex=15;
    

  27. 			$chk=2;
    

  28. 			}
    

  29. 		}
    

  30. 	}
    

  31. }
    

  32. $tmpnumvid=rand(0,13);
    

  33. $listvid=array('1.mp4','2.mp4','3.mp4','4.mp4','5.mp4','6.mp4','7.mp4','8.mp4','9.mp4','10.mp4','11.mp4','12.mp4','13.mp4','14.mp4');
    

  34.  
  35. makevid();
    

  36.  
  37. if($chk==1){
    

  38.  
  39. 	makevid();
    

  40. }
    

  41. else{
    

  42.  
  43. 	$numvid=$listvid[$tmpnumvid];
    

  44. 	echo('<embed id="vids'.$tmpnumvid.'" type="application/mp4" src="'.$numvid.'" width="320" height="240" autostart="false" controller="false" ></embed>');
    

  45. }


Je vous remercie déjà pour votre aide à tous !

Barbu

Autres pages sur : controle video javascript resolu

Lassé par la pub ? Créez un compte

Après de nombreuses heures de recherche j'ai enfin trouvé ce que je cherchais.
Je vous met l'astuce si ça peut aider quelqu'un :

Pour le plugin QuickTime avec une balise "<embed>", fonctionne avec FireFox, mais pas avec IE. Pour l'utiliser sous IE il faut rajouter la balise "<object>"

Événement à rajouter sûr l'élément déclencheur :

  1. onclick="javascript:document.embeds['nomvideo'].Play()"
    

  2. onclick="javascript:document.embeds['nomvideo'].Stop()"


Source : http://userwww.sfsu.edu/~infoarts/technical/howto/sound...
Lassé par la pub ? Créez un compte

Créer un nouveau sujet