Bonjour,

J'utilise ce script pour récupérer la durée de toutes mes vidéos :

var duration = 0;
$('.video-sequence').each(function(i, obj) {
    duration += obj.duration;
});

console.log(duration);

Alors ça fonctionne très bien sous Firefox, mais pas sous Chrome, j'ai un résultat NaN.

Quelqu'un a une idée ?

Merci.

Up ?

Bonsoir, obj.duration n'est accessible qu'une fois les métadonnées de la video chargées, or quand tu l'appelle dans ton code, elles ne sont pas encore chargées. C'est pourquoi tu dois exécuter obj.duration lorsque que l'évènement "loadedmetadata" a lieu.

Je te propose cette modification de ton code:

var duration = 0;
var loaded_occurences = 0;

$('.video-sequence').each(function(i, obj) {
    obj.addEventListener('loadedmetadata', ()=>{
        duration += obj.duration;
        loaded_occurences++;
        if(loaded_occurences == $('.video-sequence').length){

            console.log(duration);
            //la suite de ton code ici

        }
    })
});

Bonne soirée.

-
Edité par Kicraft 5 juillet 2020 à 23:34:37

Bonjour, merci pour ta réponse, j'ai fait cela :

var duration = 0;
var loaded_occurences = 0;

$('.video-sequence').each(function(i, obj) {
    obj.addEventListener('loadedmetadata', ()=>{
        duration += obj.duration;
        loaded_occurences++;
        console.log('Occurences chargées :');
        console.log(loaded_occurences);
        console.log('Nb de vidéos :');
        console.log($('.video-sequence').length);
        if (loaded_occurences == $('.video-sequence').length){
            console.log('Durée :');
            console.log(duration);
            //la suite de ton code ici
            var currentDuration = $('#durationSequence');
            currentDurationSplit = currentDuration.text().split(/[\h\min\\s]+/);
            var hours = parseInt(currentDurationSplit[0].trim());
            var minutes = parseInt(currentDurationSplit[1].trim());
            var seconds = parseInt(currentDurationSplit[2].trim());

            durationToSeconds = convertToSeconds(hours, minutes, seconds);
            var totalSeconds = durationToSeconds + Math.round(duration);
            console.log('Total secondes :');
            console.log(totalSeconds);

            var measuredTime = new Date(null);
            measuredTime.setSeconds(totalSeconds); // specify value of SECONDS
            var MHSTime = measuredTime.toISOString().substr(11, 8);
            MHSTime = MHSTime.split(':');
            var durationTXT = MHSTime[0] + ' h ' + MHSTime[1] + ' min ' + MHSTime[2] + ' s';
            currentDuration.text(durationTXT);
        }
    })
});

Alors j'ajoute une première vidéo, ça m'ajoute bien 10 secondes en + dans mon rendu (occurrences chargées : 1, nb de vidéos : 1)

Je rajoute la même vidéo, et là, ça m'a supprimé le résultat de ma première vidéo et ça n'a pas ajouté le temps de cette deuxième vidéo ! Donc je retourne à 0 seconde alors que juste avant j'étais à +10. (occurrences chargées : 1, nb de vidéos : 2)

Je rajoute une troisième fois la même vidéo, et là ça m'affiche d'un seul coup 30 secondes... Je ne comprends pas pourquoi il me saute la deuxième vidéo (et les occurrences n'augmentent pas : occurrences chargées : 1, nb de vidéos : 3)

J'ai après testé sur Firefox, rien ne fonctionne, mes console log :

console.log('Occurences chargées :');
console.log(loaded_occurences);
console.log('Nb de vidéos :');
console.log($('.video-sequence').length);

Ne s'affichent même pas.

-
Edité par YinYang2 6 juillet 2020 à 12:16:28

Bonsoir, quand tu dis "rajoute la même vidéo", tu l'ajoute dans le code HTML ou tu l'ajoute dans le DOM depuis ton JavaScript ? Si tu l'ajoute depuis JavaScript il faudra ré-exécuter ton code à chaque fois que tu ajoute une vidéo.

-
Edité par Kicraft 6 juillet 2020 à 23:55:20

Bonjour,

Quand je dis "je rajoute la même vidéo" je clique sur un bouton qui va me rajouter une vidéo dans mon module de séquences, ça se fait en php. Une fois la vidéo ajoutée c'est là où je récupère les informations de la vidéo via js et que j'affiche la durée totale des vidéos aveccurrentDuration.text(durationTXT).

Bonjour, en fait il faut que tu ré-exécute le code à chaque fois que tu clique sur le bouton, je te propose cette modification de ton code que j'ai testé et qui fonctionne (j'ai enlevé les console.log() pour plus de lisibilité sur le forum et je me suis permis de compacter tout ça):

function videos_duration(){
    var duration = 0;
    var loaded_occurences = 0;
    
    $('.video-sequence').each(function(i, obj) {
        function main() {
            duration += obj.duration;
            loaded_occurences++;
            if (loaded_occurences == $('.video-sequence').length){
                var measuredTime = new Date(null);
        
                measuredTime.setSeconds(duration);
                var MHSTime = measuredTime.toISOString().substr(11, 8).split(':');
                var durationTXT = MHSTime[0] + ' h ' + MHSTime[1] + ' min ' + MHSTime[2] + ' s';
                $('#durationSequence').text(durationTXT);
            }
        }
        if(obj.readyState >= 1){
            main();
        }else{
            obj.addEventListener('loadedmetadata', main);            
        }
    });
}

videos_duration(); //tu dois appellerla fonction à chaque fois que ajoute une video

Bonne journée.

Alors ça ne marche pas... Mais je pense que c'est du à la spécificité du programme. Voici un screen :

Le bloc de gauche est un iframe qui récupère mes médias. Quand j'appuie sur le bouton + en haut à droite de chaque média j'ajoute donc un média dans "Éléments de la séquence". A chaque fois qu'on clique sur ce bouton ça recharge la page et ça ajoute donc mon média.

J'ai donc ajouté ta fonction au niveau de l'iframe (qui est donc un fichier html à part) et j'ai fait un onclick="videos_duration()" sur chaque <a> (bouton). Mais cela ne fonctionne pas, et j'ai fait un console.log(durationTXT) dans ta fonction main() et ça n'apparait pas dans la console...

L'idéal pour moi serait de ne pas utiliser cette fonction lors d'un ajout mais plutôt une fois que la page est rechargée et que l'élément est bien ajouté dans "Éléments de la séquence".

Ah d'accord j'ai compris. Alors oui il faut mettre le code dans le fichier de l'iframe "éléments de la séquence" et vu que cette page s'actualise automatiquement lorsque qu'on appuie sur "+" sur l'autre page, tu n'as pas besoin d'appeler la fonction à chaque fois: tu ne doit donc pas mettre le code dans une fonction comme je l'ai fait et sa devrait marcher.

Super ça marche, merci beaucoup