A voir également:
- HTML + TIME, synchro video et images
- Montage video windows - Guide
- Comment télécharger une vidéo youtube - Guide
- Script vidéo youtube - Guide
- Comment mettre une vidéo sur powerpoint - Guide
- Editeur html - Télécharger - HTML
3 réponses
Salut
Je suis pas sûr d'avoir bien saisi ta question ...
Tu as une vidéo disons un fichier AVI et quelques images sur ta page html. Et tu veux te positionner dans la vidéo en fonction de l'image sur laquelle tu cliques ?
C'est bien çà ?
Philippe
Je suis pas sûr d'avoir bien saisi ta question ...
Tu as une vidéo disons un fichier AVI et quelques images sur ta page html. Et tu veux te positionner dans la vidéo en fonction de l'image sur laquelle tu cliques ?
C'est bien çà ?
Philippe
Salut Philippe,
j'ai effectivement une seule et même vidéo, je sais synchroniser des images avec la vidéo grâce au smil, mais je voudrais qu'on puisse cliquer sur un texte style : chapitre 1, chapitre 2... pour que l'internaute choisisse son chapître et navigue comme il veut dans la vidéo et tout ça en utilisant le HTML + TIME de microsoft mais bon si tu as autrechose ... de plus ton exemple ActiveMovie m'interesse, peux-tu m'en dire plus long ou m'envoyer un exemple ?
voilà, j'espère que j'ai était plus claire
a+
Pepsy
j'ai effectivement une seule et même vidéo, je sais synchroniser des images avec la vidéo grâce au smil, mais je voudrais qu'on puisse cliquer sur un texte style : chapitre 1, chapitre 2... pour que l'internaute choisisse son chapître et navigue comme il veut dans la vidéo et tout ça en utilisant le HTML + TIME de microsoft mais bon si tu as autrechose ... de plus ton exemple ActiveMovie m'interesse, peux-tu m'en dire plus long ou m'envoyer un exemple ?
voilà, j'espère que j'ai était plus claire
a+
Pepsy
Hi Pepsy
D'abord :
Qu'est-ce que le "SMIL" ???
Et le "TIME de Microsoft" ???
Ensuite voici un ex complet qui utilise ActiveMovie et JavaScript bien sûr.
Je l'ai testé avec un fichier AVI et ca marche avec IE 5.
Tu recopies le code que tu sauvegardes sous un fichier .HTM dans un répertoire.
Tu y places également une vidéo au format AVI d'au moins 15 secondes (c'est pas obligatoire c'est juste que je fais 1 saut à la position 00:00:10 ...)
Tu remplaces "test.avi" dans le code par le nom de ton fichier vidéo
(je n'ai pas testé avec d'autres formats ...) et tu testes le tout avec avec IE.
Je synchronise la procédure DspTimePosition() avec la position temporelle mais tu peux la remplacer par autre chose.
Par contre cette procédure étant appelée toutes les 150 ms arrange toi pour que la tienne soit rapide ou alors empêche la réentrance (à moins que la fonction SetInterval() le gère elle- même je l'ignore ...)
La fct "Allez en ..." n'est pas très rapide (surtout si l'AVI utilise un codec complexe comme DIVX) il faut donc être un peu patient :)
Je n'ai pas mis tous les tests possibles ... A déboguer donc :) !
Je n'ai pas utilisé de code objet JS.
Et voici enfin le code :
<html>
<head>
<title>ActiveMovie test synchro</title>
<script language="javascript">
<!--
// Convertit une durée au format hh:mm:ss en secondes
function seconde(duree)
{
h=parseInt(duree.substr(0,2))
m=parseInt(duree.substr(3,2))
s=parseInt(duree.substr(6,2))
return (h*3600+m*60+s)
}
var tps=new Array()
function temps(duree)
{
h=Math.floor(duree/3600)
tps[1]=h % 10
tps[0]=Math.floor(h/10)
duree-=(h*3600)
m=Math.floor(duree/60)
tps[3]=m % 10
tps[2]=Math.floor(m/10)
duree-=(m*60)
tps[5]=duree % 10
tps[4]=Math.floor(duree/10)
}
// Je n'utilise pas la propriété document.VIDEO.CurrentState
// car elle n'est pas assez précise
var IDLE=0
var STOPPED=1
var PLAYING=2
var PAUSED=3
var LOADING=4
// Déclaration des timers
// On pourrait n'utiliser qu'1 seul
// timer mais c'est moins clair
var timerWait=null
var timerSynchro=null
var status=IDLE
function dspStatus(valeur)
{
document.fvideo.etat.value=valeur
}
function dspTimePosition()
{
temps(Math.floor(document.VIDEO.CurrentPosition))
document.fvideo.tps.value=""+tps[0]+tps[1]+":"+tps[2]+tps[3]+":"+tps[4]+tps[5]
// Arrête le timer synchro si fin de la vidéo donc si CurrentState = stopped (0)
// CurrentState = 0 => stopped
// CurrentState = 1 => paused
// CurrentState = 2 => playing
if (document.VIDEO.CurrentState==0)
{
clearInterval(timerSynchro);
status=STOPPED
dspStatus("STOPPED")
document.fvideo.tps.value="00:00:00"
}
}
// La fonction play ne démarre pas immédiatement la lecture
// si le média n'est pas encore chargé mais lance à la place
// un timer qui attend ... sinon la méthode .run() plante !
function play()
{
// Si on est en pause alors le média est déjà chargé
if (status!=IDLE)
{
status=PLAYING;
dspStatus("PLAYING")
document.VIDEO.run();
// Active le timer pour syncho lecture
// si nécessaire
if (!timerSynchro) timerSynchro=setInterval("dspTimePosition()",150);
}
else
{
status=LOADING
dspStatus("LOADING")
// Si un timer d'attente est déjà en cours en l'arrête
if (timerWait) clearInterval(timerWait);
timerWait=setInterval("wait()",150);
}
}
// Ne pas appeler directement cette fonction !!!!
function wait()
{
if (document.VIDEO.ReadyState >= 3)
{
// Arrête le timer wait
clearInterval(timerWait);
status=PLAYING;
dspStatus("PLAYING")
timerId=null;
document.VIDEO.run();
// Lance le timer synchro
timerSynchro=setInterval("dspTimePosition()",150);
}
}
function stop()
{
// Stoppe tous les timers
if (timerWait)
{
clearInterval(timerWait);
timerWait=null;
}
if (timerSynchro)
{
clearInterval(timerSynchro);
timerSynchro=null;
}
if (status == IDLE) return;
if (status!=STOPPED) document.VIDEO.stop();
status=STOPPED
dspStatus("STOPPED")
document.fvideo.tps.value="00:00:00"
}
function pause()
{
if (status !=PLAYING) return;
document.VIDEO.pause();
status=PAUSED
dspStatus("PAUSED")
}
function locate(tps)
{
//il mq peut être des tests
document.VIDEO.CurrentPosition=seconde(tps)
if (status != PLAYING) play();
}
function load()
{
status=IDLE
dspStatus("IDLE")
}
// -->
</script>
</head>
<body onload="load()" >
<OBJECT ID="VIDEO"
CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<PARAM NAME="AutoStart" VALUE="0">
<PARAM NAME="Filename" VALUE="test.avi">
<PARAM NAME="ShowControls" VALUE="0">
<PARAM NAME="ShowDisplay" VALUE="0">
<PARAM NAME="Volume" VALUE="0">
</OBJECT>
<table border=0>
<form name=fvideo>
<tr>
<td colspan=2>
<input type=button value="Play" onclick="play()">
<input type=button value="Pause" onclick="pause()">
<input type=button value="Stop" onclick="stop()">
<input type=button value="Allez en 00:00:10" onclick="locate('00:00:10')">
</td>
</tr>
<tr>
<td>Position</td>
<td><input type=text value="" name=tps size=8></td>
</tr>
<tr>
<td>Status</td>
<td><input type=text value="" name=etat size=10></td>
</tr>
</form>
</table>
</body>
</html>
C'est tout pour aujourd'hui ...
@+
Philippe
D'abord :
Qu'est-ce que le "SMIL" ???
Et le "TIME de Microsoft" ???
Ensuite voici un ex complet qui utilise ActiveMovie et JavaScript bien sûr.
Je l'ai testé avec un fichier AVI et ca marche avec IE 5.
Tu recopies le code que tu sauvegardes sous un fichier .HTM dans un répertoire.
Tu y places également une vidéo au format AVI d'au moins 15 secondes (c'est pas obligatoire c'est juste que je fais 1 saut à la position 00:00:10 ...)
Tu remplaces "test.avi" dans le code par le nom de ton fichier vidéo
(je n'ai pas testé avec d'autres formats ...) et tu testes le tout avec avec IE.
Je synchronise la procédure DspTimePosition() avec la position temporelle mais tu peux la remplacer par autre chose.
Par contre cette procédure étant appelée toutes les 150 ms arrange toi pour que la tienne soit rapide ou alors empêche la réentrance (à moins que la fonction SetInterval() le gère elle- même je l'ignore ...)
La fct "Allez en ..." n'est pas très rapide (surtout si l'AVI utilise un codec complexe comme DIVX) il faut donc être un peu patient :)
Je n'ai pas mis tous les tests possibles ... A déboguer donc :) !
Je n'ai pas utilisé de code objet JS.
Et voici enfin le code :
<html>
<head>
<title>ActiveMovie test synchro</title>
<script language="javascript">
<!--
// Convertit une durée au format hh:mm:ss en secondes
function seconde(duree)
{
h=parseInt(duree.substr(0,2))
m=parseInt(duree.substr(3,2))
s=parseInt(duree.substr(6,2))
return (h*3600+m*60+s)
}
var tps=new Array()
function temps(duree)
{
h=Math.floor(duree/3600)
tps[1]=h % 10
tps[0]=Math.floor(h/10)
duree-=(h*3600)
m=Math.floor(duree/60)
tps[3]=m % 10
tps[2]=Math.floor(m/10)
duree-=(m*60)
tps[5]=duree % 10
tps[4]=Math.floor(duree/10)
}
// Je n'utilise pas la propriété document.VIDEO.CurrentState
// car elle n'est pas assez précise
var IDLE=0
var STOPPED=1
var PLAYING=2
var PAUSED=3
var LOADING=4
// Déclaration des timers
// On pourrait n'utiliser qu'1 seul
// timer mais c'est moins clair
var timerWait=null
var timerSynchro=null
var status=IDLE
function dspStatus(valeur)
{
document.fvideo.etat.value=valeur
}
function dspTimePosition()
{
temps(Math.floor(document.VIDEO.CurrentPosition))
document.fvideo.tps.value=""+tps[0]+tps[1]+":"+tps[2]+tps[3]+":"+tps[4]+tps[5]
// Arrête le timer synchro si fin de la vidéo donc si CurrentState = stopped (0)
// CurrentState = 0 => stopped
// CurrentState = 1 => paused
// CurrentState = 2 => playing
if (document.VIDEO.CurrentState==0)
{
clearInterval(timerSynchro);
status=STOPPED
dspStatus("STOPPED")
document.fvideo.tps.value="00:00:00"
}
}
// La fonction play ne démarre pas immédiatement la lecture
// si le média n'est pas encore chargé mais lance à la place
// un timer qui attend ... sinon la méthode .run() plante !
function play()
{
// Si on est en pause alors le média est déjà chargé
if (status!=IDLE)
{
status=PLAYING;
dspStatus("PLAYING")
document.VIDEO.run();
// Active le timer pour syncho lecture
// si nécessaire
if (!timerSynchro) timerSynchro=setInterval("dspTimePosition()",150);
}
else
{
status=LOADING
dspStatus("LOADING")
// Si un timer d'attente est déjà en cours en l'arrête
if (timerWait) clearInterval(timerWait);
timerWait=setInterval("wait()",150);
}
}
// Ne pas appeler directement cette fonction !!!!
function wait()
{
if (document.VIDEO.ReadyState >= 3)
{
// Arrête le timer wait
clearInterval(timerWait);
status=PLAYING;
dspStatus("PLAYING")
timerId=null;
document.VIDEO.run();
// Lance le timer synchro
timerSynchro=setInterval("dspTimePosition()",150);
}
}
function stop()
{
// Stoppe tous les timers
if (timerWait)
{
clearInterval(timerWait);
timerWait=null;
}
if (timerSynchro)
{
clearInterval(timerSynchro);
timerSynchro=null;
}
if (status == IDLE) return;
if (status!=STOPPED) document.VIDEO.stop();
status=STOPPED
dspStatus("STOPPED")
document.fvideo.tps.value="00:00:00"
}
function pause()
{
if (status !=PLAYING) return;
document.VIDEO.pause();
status=PAUSED
dspStatus("PAUSED")
}
function locate(tps)
{
//il mq peut être des tests
document.VIDEO.CurrentPosition=seconde(tps)
if (status != PLAYING) play();
}
function load()
{
status=IDLE
dspStatus("IDLE")
}
// -->
</script>
</head>
<body onload="load()" >
<OBJECT ID="VIDEO"
CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<PARAM NAME="AutoStart" VALUE="0">
<PARAM NAME="Filename" VALUE="test.avi">
<PARAM NAME="ShowControls" VALUE="0">
<PARAM NAME="ShowDisplay" VALUE="0">
<PARAM NAME="Volume" VALUE="0">
</OBJECT>
<table border=0>
<form name=fvideo>
<tr>
<td colspan=2>
<input type=button value="Play" onclick="play()">
<input type=button value="Pause" onclick="pause()">
<input type=button value="Stop" onclick="stop()">
<input type=button value="Allez en 00:00:10" onclick="locate('00:00:10')">
</td>
</tr>
<tr>
<td>Position</td>
<td><input type=text value="" name=tps size=8></td>
</tr>
<tr>
<td>Status</td>
<td><input type=text value="" name=etat size=10></td>
</tr>
</form>
</table>
</body>
</html>
C'est tout pour aujourd'hui ...
@+
Philippe
Salut,
merci pour le script, je vais l'essayer.
Le SMIL est un language de programmation qui comme je te l'ai dit permet de synchroniser de la vidéo avec des slides par exemple va voir le site www.tve.net sur l'accueil clique sur le personnage en bas à gauche, puis tu arrive sur une vidéo avec un menu à droite, choisis "synchronisation", la vidéo est synchronisée avec des slides, si tu a un bon débit tout devrait aller !
Pour le HTML + TIME, va sur http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/time.asp c'est en anglais, évidemment pas de version française !!! et ne donnent pas vraiment d'exemples avec de la vidéo non plus !
Bon, au boulot
a+
pepsy
merci pour le script, je vais l'essayer.
Le SMIL est un language de programmation qui comme je te l'ai dit permet de synchroniser de la vidéo avec des slides par exemple va voir le site www.tve.net sur l'accueil clique sur le personnage en bas à gauche, puis tu arrive sur une vidéo avec un menu à droite, choisis "synchronisation", la vidéo est synchronisée avec des slides, si tu a un bon débit tout devrait aller !
Pour le HTML + TIME, va sur http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/time.asp c'est en anglais, évidemment pas de version française !!! et ne donnent pas vraiment d'exemples avec de la vidéo non plus !
Bon, au boulot
a+
pepsy
5 nov. 2001 à 11:09
en fait j'ai une video .wmv à laquelle je synchronise des images selon le discours de la vidéo, et je voudrais que l'internaute puisse choisir le chapitre qu'il veut voir en cliquant sur la liste des chapitres qui sera inscrite à côté.
voilà, si tu a une solution, merci d'avance
a+
pepsy
6 nov. 2001 à 20:20
Tu as une seule et même vidéo ?
Qu'entends-tu par "je synchronise les images" ?
Tu arrives déjà à synchroniser ta vidéo avec des images ou c'est ce que tu voudrais faire ?
Pourrais-tu détailler stp ?
Pour ma part voici ce que je pense qu'il est possible de réaliser grâce à un object ActiveMovie mais SEULEMENT avec IE !!!!!
De plus je ne sais pas si cela marche avec .wmv ni avec du streaming ... Je sais ça fait beaucoup d'inconnues ! :)
Pour ex si ta vidéo fait , mettons 2min30 soit 00:02:30, alors avec ActiveMovie tu peux afficher l'image 'A' à partir de la position
00:01:25 par ex puis l'image 'B' en 00:01:59 puis l'image 'C' en
00:02:10 lorsque la vidéo est jouée. Voir pendant un intervalle par ex l'image D uniquement entre 00:01:45 et 00:01:51
Mais est-ce que tu recherche ?
@+
Philippe