IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Pauses régulières sur une vidéo HTML5, événements de l'élément vidéo


Sujet :

JavaScript

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    Octobre 2015
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Chercheur en informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2015
    Messages : 3
    Points : 1
    Points
    1
    Par défaut Pauses régulières sur une vidéo HTML5, événements de l'élément vidéo
    Bonjour à tous je suis débutant en javascript et j'ai récupéré un code qui fonctionne mais que j'aimerai améliorer. Il permet de lire une vidéo et de faire en sorte qu'elle se mette en pause pendant un certains temps puis qu'elle reprenne sa lecture... Actuellement le code met la vidéo 5 fois en pause mais lorsqu'elle se termine et se remet en boucle le script ne fonctionne plus. J'aimerai que ma vidéo se relance et que je ne sorte pas de la boucle. Ma vidéo ne dure que 9 secondes... Merci à l'avance pour votre aide.
    Voici ma boucle:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    var myvideo = document.getElementById('myvideo'),
    var time = [1,3,5,7,9,11]; 
            var bools = [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false]; 
            myvideo.addEventListener("timeupdate", function()
            {            
                for (i = 0; i <= 100; i++) 
                {
                    if(this.currentTime >= time[i] && bools[i] == false) {
                    this.pause();
     
     
                    setTimeout(function(){ myvideo.play(); playbutton.style.visibility = "hidden"; }, 1000);
                    bools[i] = true;
     
                    }
                }
     
            });

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    C'est un peu curieux cette boucle faite 100 fois avec une liste de 25 booléens "false", le tout pour faire 6 pauses. Il va falloir se décider sur le nombre

    Essaie ça:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
     
    var myvideo = document.getElementById('myvideo');
    var time = [1,3,5,7,9,11]; 
    var bools = []; 
    myvideo.addEventListener("timeupdate", function()
    {            
       for (var i = 0; i <= time.length; i++) 
      {
           if(myvideo.currentTime >= time[i] && !bools[i]) {
               myvideo.pause();
     
               setTimeout(function(){ myvideo.play(); playbutton.style.visibility = "hidden"; }, 1000);
               bools[i] = true;
          }
       }
     
    });
     
    myvideo.addEventListener("ended", function()
    {            
      bools = []; // quand la vidéo est finie, on réinitialise la liste des passages déjà mis en pause 
    });
    Là je réinitialise quand la vidéo a fini d'être lue (événement "ended"). Tu souhaites peut-être avoir un autre comportement, par exemple quand on repositionne le curseur sur la ligne de temps de la vidéo (évènement "seeked").

    Tu as la liste des événements disponibles en bas de cette page: https://developer.mozilla.org/fr/doc...video_en_HTML5

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    Octobre 2015
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Chercheur en informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2015
    Messages : 3
    Points : 1
    Points
    1
    Par défaut Resolu
    Merci beaucoup. ça marche de cette manière:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
     
    var time = [1,3,5,7]; /*This array holds the times at which the video has to stop. The time is in seconds.*/
            var bools = [false, false, false, false, false]; /*This holds the boolean for when the time has passed.*/
            myvideo.addEventListener("timeupdate", function()
            {            
                for (i = 0; i <= time.length; i++) /*The for loop to check for the conditions. 21 stops total*/
                {
                    if(this.currentTime >= time[i] && bools[i] == false) {
                    this.pause();
    				console.log("ok")
    				if (myvideo.paused) {
                    playbutton.style.visibility = "visible";
     
                    }
     
    				myvideo.addEventListener("click", function () {myvideo.play()});
    				setTimeout(function(){ myvideo.play(); playbutton.style.visibility = "hidden"; }, 1000);
                    bools[i] = true;
     
     
                    }
                }
     
            });
     
    myvideo.addEventListener("seeked", function(){            
      bools = [false, false, false, false]; // quand la vidéo est finie, on réinitialise la liste des passages déjà mis en pause 
    });

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 643
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 643
    Points : 66 669
    Points
    66 669
    Billets dans le blog
    1
    Par défaut
    J'adore le
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var bools = [false, false, false, false, false];

  5. #5
    Nouveau Candidat au Club
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    Octobre 2015
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Chercheur en informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2015
    Messages : 3
    Points : 1
    Points
    1
    Par défaut
    Je suis preneur si une meilleur solution existe. Malheureusement il n' y a qu'avec ces "false" que le code fonctionne...

  6. #6
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Ça m'intéresse de savoir qu'est-ce qui n'allait pas dans mon code. En dehors de changer l'event "ended" par "seeked" comme suggéré.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. expression régulière sur une url
    Par Sh4dow49 dans le forum Général JavaScript
    Réponses: 22
    Dernier message: 20/08/2008, 21h32
  2. Simuler l'appui sur une touche sans évènement
    Par pc.bertineau dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 27/02/2008, 16h40
  3. Expression régulière sur une date
    Par mattyeux dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 26/09/2007, 17h08
  4. [RegEx] Expression régulière sur une date
    Par mattyeux dans le forum Langage
    Réponses: 1
    Dernier message: 21/09/2007, 11h16
  5. Réponses: 1
    Dernier message: 08/11/2006, 17h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo