gestion de vidéo en html5 et javascript

invite05923eca · 31/08/2016, 12h35

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

Code HTML:

<!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>

**invite948b37db** · 31/08/2016, 14h08

Bonjour
Tu fais les tests avec quel navigateur et sur quel ordinateur (Mac ou Windows ?)
Il semble que AUTOPLAY pose problème sur MacOS et Iphone.

invite05923eca · 31/08/2016, 14h21

En fait ce n'est pas autoplay qui pose problème. Il fonctionne sur tous les navigateurs récents sauf ios et android masi plustot le codage javascript, il me manque une ligne de code conditionnel pour revenir au début de la 1ere video .

**invite948b37db** · 31/08/2016, 14h44

Essaie ce script modifié. même si ça ne marche pas en l'état, creuse l'idée.

Code:

<script>
function myFunction() 
   {
    document.getElementById("mp4_src").src = "movie.mp4";
    document.getElementById("mp4_src").src = "movie.mp4";
/* document.getElementById("myVideo").load(); */

   var mavideo = document.getElementById('myVideo');
   if (typeof mavideo .loop == 'boolean')       //si loop est accepté par le navigateur
      {
      mavideo .loop = true;
      } 
  else                                                       //si loop n'est pas accepté par le navigateur
      {
      mavideo .addEventListener('ended', function () 
          {
          this.currentTime = 0;
          this.play();
          }
      }
      mavideo .play();
  }
</script>

A voir en vidéo sur Futura · Aujourd'hui

invite05923eca · 31/08/2016, 14h59

Merci pour tes efforts mais dans ce cas, la deuxième vidéo ne démarre plus au clic...

**invite948b37db** · 31/08/2016, 15h15

Envoyé par tribalwar

Merci pour tes efforts mais dans ce cas, la deuxième vidéo ne démarre plus au clic...

Je n'y avais pas pensé mais effectivement, la 1ère va boucler à l'infini empêchant la seconde de démarrer. il n'y a pas moyen de fusionner les deux vidéos ?
Sinon, il faut supprimer l'argument loop et faire une boucle JS qui lance la vidéo 1, intercepte l'état END, lance la 2e et vice versa.

invite05923eca · 31/08/2016, 15h27

Oui, il y a moyen de fusionner les deux mais dans ce cas, il faudrait un compteur pour faire démarrer la deuxième partie au clic. Quand à la boucle en js, j'ai peur que cela dépasse mes capacités, mais si ca ne te dérange pas, un petit coup de main n'est pas de refus pour la première ou la deuxième solution.

**invite948b37db** · 31/08/2016, 16h09

Envoyé par tribalwar

Oui, il y a moyen de fusionner les deux mais dans ce cas, il faudrait un compteur pour faire démarrer la deuxième partie au clic.

Comprends pas ? Si fusion, il n'y a plus qu'une seule vidéo ?

invite05923eca · 31/08/2016, 16h22

oui effectivement mais la premiere partie de la video(avatar muet et animé) doit passer en boucle jusqu'àu clic qui lancera la 2eme partie de la vidéo avec retour au début en fin de lecture puis boucle à nouveau etc... il faut donc indiquer la position de début de la deuxième partie afin de caler la lecture au clic à cet endroit précis d'où un compteur.

**invite948b37db** · 31/08/2016, 16h30

Envoyé par tribalwar

oui effectivement mais la premiere partie de la video(avatar muet et animé) doit passer en boucle jusqu'àu clic qui lancera la 2eme partie de la vidéo avec retour au début

retour au début de quelle partie, la 1ère ou la 2e ?
La question est, quand elle est lancée, le 2e boucle sur elle même ou elle redonne la main à la 1ère ?

invite05923eca · 31/08/2016, 16h46

Pour que tu comprennes mieux, il s'agit d'une présentation.
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 plus clair

**invite948b37db** · 31/08/2016, 18h00

Dans ce cas, je vois un autre montage en créant une seconde DIV de dimensions et de position identiques.
La première aura une propriété visibility=true ;
le seconde aura une propriété visibility=false ;

le bouton info déclenchera un script qui commencera par inverser les valeurs de visibility et lancera ensuite la vidéo.
quand cette vidéo sera terminée, le script inversera à nouveau les visibility.

De mon côté, je vais chercher comment détecter la fin de la vidéo. En attendant, créé les deux DIV et teste-les en changeant les valeurs de visibility.

gestion de vidéo en html5 et javascript

gestion de vidéo en html5 et javascript

Re : gestion de vidéo en html5 et javascript

Re : gestion de vidéo en html5 et javascript

Re : gestion de vidéo en html5 et javascript

Re : gestion de vidéo en html5 et javascript

Re : gestion de vidéo en html5 et javascript

Re : gestion de vidéo en html5 et javascript

Re : gestion de vidéo en html5 et javascript

Re : gestion de vidéo en html5 et javascript

Re : gestion de vidéo en html5 et javascript

Re : gestion de vidéo en html5 et javascript

Re : gestion de vidéo en html5 et javascript

Discussions similaires

Gestion d'une vidéo avec dynamo

Javascript : Intégrer une variable javascript dans un champ de formulaire html

insérer une vidéo dans une tab javascript

inserer un vidéo avec javascript

Apprendre Html5 et CSS