gestion de vidéo en html5 et javascript
Répondre à la discussion
Affichage des résultats 1 à 12 sur 12

gestion de vidéo en html5 et javascript



  1. 31/08/2016, 11h35 #1
    tribalwar

    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

    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>

    -----
  2. 31/08/2016, 13h08 #2
    cherbe

    Re : gestion de vidéo en html5 et javascript

    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.
    Dernière modification par cherbe ; 31/08/2016 à 13h10.
    Pour avoir de l'argent devant soi, il faut en mettre de côté ! (proverbe lorrain)
  3. 31/08/2016, 13h21 #3
    tribalwar

    Re : gestion de vidéo en html5 et javascript

    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 .
  4. 31/08/2016, 13h44 #4
    cherbe

    Re : gestion de vidéo en html5 et javascript

    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>
    Pour avoir de l'argent devant soi, il faut en mettre de côté ! (proverbe lorrain)
  5. Aujourd'hui
    A voir en vidéo sur Futura
  6. 31/08/2016, 13h59 #5
    tribalwar

    Re : gestion de vidéo en html5 et javascript

    Merci pour tes efforts mais dans ce cas, la deuxième vidéo ne démarre plus au clic...
  7. 31/08/2016, 14h15 #6
    cherbe

    Re : gestion de vidéo en html5 et javascript

    Citation Envoyé par tribalwar Voir le message
    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.
    Pour avoir de l'argent devant soi, il faut en mettre de côté ! (proverbe lorrain)
  8. 31/08/2016, 14h27 #7
    tribalwar

    Re : gestion de vidéo en html5 et javascript

    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.
  9. 31/08/2016, 15h09 #8
    cherbe

    Re : gestion de vidéo en html5 et javascript

    Citation Envoyé par tribalwar Voir le message
    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 ?
    Pour avoir de l'argent devant soi, il faut en mettre de côté ! (proverbe lorrain)
  10. 31/08/2016, 15h22 #9
    tribalwar

    Re : gestion de vidéo en html5 et javascript

    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.
  11. 31/08/2016, 15h30 #10
    cherbe

    Re : gestion de vidéo en html5 et javascript

    Citation Envoyé par tribalwar Voir le message
    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 ?
    Pour avoir de l'argent devant soi, il faut en mettre de côté ! (proverbe lorrain)
  12. 31/08/2016, 15h46 #11
    tribalwar

    Re : gestion de vidéo en html5 et javascript

    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
    Dernière modification par tribalwar ; 31/08/2016 à 15h48.
  13. 31/08/2016, 17h00 #12
    cherbe

    Re : gestion de vidéo en html5 et javascript

    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.
    Pour avoir de l'argent devant soi, il faut en mettre de côté ! (proverbe lorrain)
« Aprendre des mots | VBA - Compatibilité "activechart.location" entre Excel 2003 et 2010 »

Discussions similaires

  1. Gestion d'une vidéo avec dynamo
    Par Bryou dans le forum Électronique
    Réponses: 15
    Dernier message: 03/04/2015, 14h38
  2. Javascript : Intégrer une variable javascript dans un champ de formulaire html
    Par squal31 dans le forum Programmation et langages, Algorithmique
    Réponses: 1
    Dernier message: 03/08/2014, 11h15
  3. insérer une vidéo dans une tab javascript
    Par yasmine123 dans le forum Programmation et langages, Algorithmique
    Réponses: 2
    Dernier message: 24/02/2014, 17h54
  4. inserer un vidéo avec javascript
    Par yasmine123 dans le forum Programmation et langages, Algorithmique
    Réponses: 2
    Dernier message: 21/02/2014, 16h35
  5. Apprendre Html5 et CSS
    Par berguem40 dans le forum Programmation et langages, Algorithmique
    Réponses: 12
    Dernier message: 14/02/2012, 23h22