Sujet Précédent Sujet Suivant

Gestion de vidéo en html5 et javascript

Fermé
tribalwar Messages postés 7 Date d'inscription lundi 5 juillet 2010 Statut Membre Dernière intervention 31 août 2016 - 31 août 2016 à 13:10
tribalwar Messages postés 7 Date d'inscription lundi 5 juillet 2010 Statut Membre Dernière intervention 31 août 2016 - 31 août 2016 à 17:25
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 

<!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>
clair
A voir également:

2 réponses

Réponse 1 / 2
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
31 août 2016 à 14:59
Salut,

Regarde du coté de l'événement javascript onended pour détecter la fin de lecture de la vidéo : https://www.w3schools.com/tags/av_event_ended.asp

Au passage, un attribut id doit normalement être unique.

Bonne journée,
0
Réponse 2 / 2
tribalwar Messages postés 7 Date d'inscription lundi 5 juillet 2010 Statut Membre Dernière intervention 31 août 2016 14
31 août 2016 à 17:25
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

Voilà le début de code mais il manque encore pas mal de chose... un p'tit coup de main?
0

Discussions similaires

une image de quelque seconde sur une vidéo
rizumu -
Lapourax -

6 réponses