11521 sujets

JavaScript, DOM et API Web HTML5

Gestion de vidéo en html5 et javascript

Bonjour,
Voici mon problème. Je dispose d'une vidéo d'un avatar animé et une autre du même délivrant un message. La premeière vidéo doit s'afficher en loop et au clic sur le bouton la deuxième doit démarrer faisant croire que le personnage se met à parler. Jusque là pas de problème sauf qu'à la fin de la 2ème vidéo (donc à la fin du message) la 1ère doit réapparaitre et continuer à fonctionner en boucle. Le pb est que je n'arrive pas à faire redemarrer la 1ere vidéo en fin de lecture. J'espère que c'est assez clair

 <!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()" type="button">Change Video</button><br>
<video id="myVideo"  autoplay loop>
  <source id="mp4_src" src="dict_e_homme1_.mp4" type="video/mp4">
   <source id="mp4_src" src="dict_e_femme2_.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
<script>
function myFunction() {
    document.getElementById("mp4_src").src = "movie.mp4";
    document.getElementById("mp4_src").src = "movie.mp4";
    document.getElementById("myVideo").load();
}
</script>
</body>
</html>
en fait, le plus simple serait peut-être de fusionner les 2 vidéos.
Bonjour,
La vidéo serait divisée en 2 parties une partie muette ou l'avatar est seulement animé (cette partie passe en boucle jusqu'au clic) et la 2ème partie où il parle et délivre une information lors du clic sur un bouton "INFO". Lancer la vidéo ne me pose pas de problème. Ce que je ne sais pas faire c'est caler la lecture sur la 2ème partie lors du clic. Je suppose qu'il faut prévoir un compteur.

Déroulement prévu:

1- L'avatar est présent et est animé en boucle.(1ère partie)
2- clic sur le bouton info-->lancement du message (2ème partie de la vidéo) l'avatar délivre alors le message.
3- Fin du message (fin de la 2ème partie ) --> Retour au début de la vidéo (1ère partie)
4- L'avatar est présent et est animé en boucle. (attente du clic)
J'espère que c'est clair

... un p'tit coup de main?
Bienvenu dans le forum puisqu il semble que vous soyez nouveau .
Je ne connais pas votre niveau mais il me semble ( pour adoucir mon propos) que vous ne comprenez RIEN à HTML ainsi qu'à l API et aux rôles des "balises" HTML5 video ( lire un de mes posts ) . Testez vous même en faisant UNE modification ( tag attribut valeur d attribut ) dans le source en visualisant à chaque modification ce qui se passe réellement dans le dom de chaque navigateurs (chrome firefox ie) . Après . après avoir fait ça après chaque modifications ; essayez de coder un peu de javascript puis après quele test de laPI HTML 5 vidéo je pense que vous pouvez passer à votre problème ..... ( un outil comme bracket permet de visualiser en temps réel sur un serveur nodejs les modifications se trouvant dans la page html ou css ou js) . Utiliser la console de debug pour tester votre script et voir ce que cela change .....avant de l écrire dans un fichier .js !!!

Petites (impré) précisions :
0-que contient dict_e_homme1_.mp4 et dict_e_femme2_.mp4 au niveau piste ? ( son et images ? )
a lire <source id="mp4_src" src="dict_e_homme1_.mp4" type="video/mp4">
le type est video/mp4 donc les fichiers dict_*.mp4 contiennent une piste audio et une piste video.... non ?
sinon je me serais attendu à lire au niveau du type type="audio/**" : 
<audio controls>
  <source src="horse.ogg" type="audio/ogg">


1- pensez vous que ce qui est ecrit ci dessous signifie que les videos sont en overlay ?
<source id="mp4_src" src="dict_e_homme1_.mp4" type="video/mp4">
<source id="mp4_src" src="dict_e_femme2_.mp4" type="video/mp4">
mettre 2 tag <source> l 'un après l 'autre signifie que si le premier source n'est pas compatible avec le player du navigateur ( e ngros le navigateur ne sait pas le lire) alors le navigateur doit essayer de lire l'item suivant ( lautre soruce qu il rencontre tout de suite après ) ...mais ici le source est de même type que le précedent ( *.mp4 et video/mp4) alors qucun intérêt à ecrire le code de cette façon . Pour permettre au navigateur d 'utiliser une source alternative ( la deuxième) ...... il faut changer au moins pour chaque vidéo l'extension du fichier et le mime/Type ( et bien sur la structure du fichier vidéo appelé encodage en rapport l'extension du fichier et le mime type associé à l'extension )

2- <source id="mp4_src" src="dict_e_homme1_.mp4" type="video/mp4">
<source id="mp4_src" src="dict_e_femme2_.mp4" type="video/mp4">
pourquoi les même id contiennent des src différents ? ne faudrait il pas avoir des id et src tous les deux différents ? Enfin en HTML un id est unique ........( basique )

3 document.getElementById("mp4_src").src = "movie.mp4";
document.getElementById("mp4_src").src = "movie.mp4";
pourquoi répéter 2 fois la même chose ?
Sinon écrire ça signifie que pour chaque tag ayant un id=mp4_src il faut remplacer la valeur de src par movie.mp4 . En faisant ça on obtient en gros ( dans le dom pas le source qui lui ne change pas sur le serveur )

 <video id="myVideo"  autoplay loop>
  <source id="mp4_src" src="movie.mp4" type="video/mp4">
   <source id="mp4_src" src="movie.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>


4 le message est il textuel ou sonore ?
1ere video = animation sans voix ?
2eme video = animation avec voix ?

5 si le click doit donner l illusion que la vidéo a du son alors la deuxieme video n'est pas une video et n est qu' un fichier de son sans image et qui démarre en même temps que la bande video .
Dans ce cas pourquoi pas muter le son par script à partir d'une seule video contenant 2 pistes ( le son et les images =frames /vidéo ) !

---------------------------------------
SINON ICI QUELQUES PRINCIPES CONCERNANT L API HTML5 ( un autre principe est d 'écrire en petit dans un forum ...)
l'évènement de fin de lecture d'une video est ended 

<video src="video.ogv" id="myVideo">
  video not supported
</video>



<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // What you want to do after the event
    }
</script>
------------------------------------------------
pour relire la video , il faut mettre le curseur de lecture de la time line au début et lancer la lecture 

video.currentTime = 0;
video.play();


beaucoups d' imprécisions ( pour moi) qui rend difficile de répondre correctement ...En espérant que cela aidera un peu !!
Modifié par 75lionel (12 Sep 2016 - 20:23)
Sujet clos
Aller à