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
[cpp]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Galerie - Visions du réel</title>
<link rel='stylesheet' type='text/css' href='http://www.cepv.ch/elementsbase/styleCEPV.css'>
<script language="javascript">
function charge_page(contener,contenu)
{
cont = document.getElementById(contener);
cont.innerHTML = "";
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
// CONTROLE DE L'ETAT DE LA REQUETE
// CHAQUE CHANGEMENT D'ETAT AFFICHE UNE LIGNE
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
cont.innerHTML = '';
// CONTROLE LE STATUS (ERREUR 404, ETC)
if(xhr_object.status == 200)
cont.innerHTML += xhr_object.responseText;
else
cont.innerHTML +="Error code " + xhr_object.status;
}
};
// APPELLE LA PAGE
xhr_object.open("GET", contenu, true);
xhr_object.send(null);
}
function loadandwait(){
setTimeout("charge_page('vid1', 'chg.php')",2000);
setTimeout("charge_page('vid2', 'chg.php')",4000);
setTimeout("charge_page('vid3', 'chg.php')",6000);
setTimeout("charge_page('vid4', 'chg.php')",8000);
}
</script>
</head>
<body onload="loadandwait();">
<a href="#" onclick="javascript:vids8.controls.play">TEST</a>
<table width="661" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td><img src="http://www.cepv.ch/elementsbase/espaceur.gif" alt="a" border="0" height="10" width="109" /></td>
<td><img src="http://www.cepv.ch/elementsbase/espaceur.gif" alt="a" border="0" height="10" width="109" /></td>
<td valign="top"><img src="http://www.cepv.ch/elementsbase/espaceur.gif" alt="a" border="0" height="10" width="109" /></td>
<td valign="top"><img src="http://www.cepv.ch/elementsbase/espaceur.gif" alt="a" border="0" height="10" width="109" /></td>
<td valign="top"><img src="http://www.cepv.ch/elementsbase/espaceur.gif" alt="a" border="0" height="10" width="109" /></td>
<td valign="top"><img src="http://www.cepv.ch/elementsbase/espaceur.gif" alt="a" border="0" height="10" width="109" /></td>
</tr>
<tr>
<td height="105" colspan="3" valign="top"><a href="http://www.cepv.ch/"><img src="http://www.cepv.ch/elementsbase/cepv_grisbl.gif" alt="a" align="middle" border="0" height="96" width="96" /></a><img src="http://www.cepv.ch/elementsbase/espaceur.gif" alt="a" align="middle" border="0" height="100" width="10" /><a href="http://www.cepv.ch/"><img src="http://www.cepv.ch/elementsbase/CEPV.gif" alt="a" align="middle" border="0" height="96" width="188" /></a></td>
<td colspan="3" valign="bottom"><a href="http://www.cepv.ch/eaa/index.htm"><img src="http://www.cepv.ch/elementsbase/ESAA.gif" alt="a" border="0" height="53" width="218" /></a></td>
</tr>
<tr>
<td colspan="3" valign="top"></td>
<td colspan="3"><span class="textegris"><a href="../index.htm"><img src="http://www.cepv.ch/elementsbase/flechenoiregauche.gif" alt="a" border="0" height="8" width="9" /> galeries</a></span></td>
</tr>
<tr>
<td colspan="6" align="left" valign="top" bgcolor="#cbc5b9"><table width="100%" border="0" cellpadding="0" cellspacing="10">
<tr>
<td><p class="titrenoir">Visions du réel - Vidéos</p>
</td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#CBC5B9"><div id="vid1" onclick="charge_page('vid1','chg.php');">
</div></td>
<td colspan="3" align="center" bgcolor="#CBC5B9"><div id="vid2">
</div></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#CBC5B9"><div id="vid3">
</div></td>
<td colspan="3" align="center" bgcolor="#CBC5B9"><div id="vid4">
</div></td>
</tr>
</table>
<table width="661" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td colspan="2" class="textegrismini" align="left"><a href="http://www.cepv.ch">CEPV</a> - <a href="../../index.htm">Galeries</a> - <a href="index.htm">Vision du réél</a></td>
<td colspan="2" align="right" class="textegrismini"> mb
-
<!-- #BeginDate format:Br1 -->15.04.08<!-- #EndDate --></td>
</tr>
</table>
</body>
</html>
[/cpp]
chg.php
[cpp]<?php
function makevid(){
$ex=0;
$chk=0;
while($chk==0){
while($ex!=15){
if($ex<14){
$vu=$tmpnumvid.'.mp4';
if($vu==$vidsvu[$ex]){
$chk=1;
$ex=14;
}
else{
$chk=0;
$ex++;
}
}
else{
$ex=15;
$chk=2;
}
}
}
}
$tmpnumvid=rand(0,13);
$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');
makevid();
if($chk==1){
makevid();
}
else{
$numvid=$listvid[$tmpnumvid];
echo('<embed id="vids'.$tmpnumvid.'" type="application/mp4" src="'.$numvid.'" width="320" height="240" autostart="false" controller="false" ></embed>');
}[/cpp]
Je vous remercie déjà pour votre aide à tous !
Barbu
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
[cpp]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Galerie - Visions du réel</title>
<link rel='stylesheet' type='text/css' href='http://www.cepv.ch/elementsbase/styleCEPV.css'>
<script language="javascript">
function charge_page(contener,contenu)
{
cont = document.getElementById(contener);
cont.innerHTML = "";
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
// CONTROLE DE L'ETAT DE LA REQUETE
// CHAQUE CHANGEMENT D'ETAT AFFICHE UNE LIGNE
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
cont.innerHTML = '';
// CONTROLE LE STATUS (ERREUR 404, ETC)
if(xhr_object.status == 200)
cont.innerHTML += xhr_object.responseText;
else
cont.innerHTML +="Error code " + xhr_object.status;
}
};
// APPELLE LA PAGE
xhr_object.open("GET", contenu, true);
xhr_object.send(null);
}
function loadandwait(){
setTimeout("charge_page('vid1', 'chg.php')",2000);
setTimeout("charge_page('vid2', 'chg.php')",4000);
setTimeout("charge_page('vid3', 'chg.php')",6000);
setTimeout("charge_page('vid4', 'chg.php')",8000);
}
</script>
</head>
<body onload="loadandwait();">
<a href="#" onclick="javascript:vids8.controls.play">TEST</a>
<table width="661" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td><img src="http://www.cepv.ch/elementsbase/espaceur.gif" alt="a" border="0" height="10" width="109" /></td>
<td><img src="http://www.cepv.ch/elementsbase/espaceur.gif" alt="a" border="0" height="10" width="109" /></td>
<td valign="top"><img src="http://www.cepv.ch/elementsbase/espaceur.gif" alt="a" border="0" height="10" width="109" /></td>
<td valign="top"><img src="http://www.cepv.ch/elementsbase/espaceur.gif" alt="a" border="0" height="10" width="109" /></td>
<td valign="top"><img src="http://www.cepv.ch/elementsbase/espaceur.gif" alt="a" border="0" height="10" width="109" /></td>
<td valign="top"><img src="http://www.cepv.ch/elementsbase/espaceur.gif" alt="a" border="0" height="10" width="109" /></td>
</tr>
<tr>
<td height="105" colspan="3" valign="top"><a href="http://www.cepv.ch/"><img src="http://www.cepv.ch/elementsbase/cepv_grisbl.gif" alt="a" align="middle" border="0" height="96" width="96" /></a><img src="http://www.cepv.ch/elementsbase/espaceur.gif" alt="a" align="middle" border="0" height="100" width="10" /><a href="http://www.cepv.ch/"><img src="http://www.cepv.ch/elementsbase/CEPV.gif" alt="a" align="middle" border="0" height="96" width="188" /></a></td>
<td colspan="3" valign="bottom"><a href="http://www.cepv.ch/eaa/index.htm"><img src="http://www.cepv.ch/elementsbase/ESAA.gif" alt="a" border="0" height="53" width="218" /></a></td>
</tr>
<tr>
<td colspan="3" valign="top"></td>
<td colspan="3"><span class="textegris"><a href="../index.htm"><img src="http://www.cepv.ch/elementsbase/flechenoiregauche.gif" alt="a" border="0" height="8" width="9" /> galeries</a></span></td>
</tr>
<tr>
<td colspan="6" align="left" valign="top" bgcolor="#cbc5b9"><table width="100%" border="0" cellpadding="0" cellspacing="10">
<tr>
<td><p class="titrenoir">Visions du réel - Vidéos</p>
</td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#CBC5B9"><div id="vid1" onclick="charge_page('vid1','chg.php');">
</div></td>
<td colspan="3" align="center" bgcolor="#CBC5B9"><div id="vid2">
</div></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#CBC5B9"><div id="vid3">
</div></td>
<td colspan="3" align="center" bgcolor="#CBC5B9"><div id="vid4">
</div></td>
</tr>
</table>
<table width="661" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td colspan="2" class="textegrismini" align="left"><a href="http://www.cepv.ch">CEPV</a> - <a href="../../index.htm">Galeries</a> - <a href="index.htm">Vision du réél</a></td>
<td colspan="2" align="right" class="textegrismini"> mb
-
<!-- #BeginDate format:Br1 -->15.04.08<!-- #EndDate --></td>
</tr>
</table>
</body>
</html>
[/cpp]
chg.php
[cpp]<?php
function makevid(){
$ex=0;
$chk=0;
while($chk==0){
while($ex!=15){
if($ex<14){
$vu=$tmpnumvid.'.mp4';
if($vu==$vidsvu[$ex]){
$chk=1;
$ex=14;
}
else{
$chk=0;
$ex++;
}
}
else{
$ex=15;
$chk=2;
}
}
}
}
$tmpnumvid=rand(0,13);
$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');
makevid();
if($chk==1){
makevid();
}
else{
$numvid=$listvid[$tmpnumvid];
echo('<embed id="vids'.$tmpnumvid.'" type="application/mp4" src="'.$numvid.'" width="320" height="240" autostart="false" controller="false" ></embed>');
}[/cpp]
Je vous remercie déjà pour votre aide à tous !
Barbu