Capturer des images à partir de vidéos en HTML5 et JavaScript

Je veux capturer une image à partir de la vidéo toutes les 5 secondes.

C'est mon code JavaScript:

video.addEventListener('loadeddata', function() {
    var duration = video.duration;
    var i = 0;

    var interval = setInterval(function() {
        video.currentTime = i;
        generateThumbnail(i);
        i = i+5;
        if (i > duration) clearInterval(interval);
    }, 300);
});

function generateThumbnail(i) {     
    //generate thumbnail URL data
    var context = thecanvas.getContext('2d');
    context.drawImage(video, 0, 0, 220, 150);
    var dataURL = thecanvas.toDataURL();

    //create img
    var img = document.createElement('img');
    img.setAttribute('src', dataURL);

    //append img in container div
    document.getElementById('thumbnailContainer').appendChild(img);
}

Le problème que j'ai est la 1ère deux images générées sont les mêmes et la durée de 5 secondes, l'image n'est pas généré. J'ai trouvé que la vignette est généré avant l'image vidéo de l'heure est affichée dans < video> tag.

Par exemple, lorsque video.currentTime = 5, image de image de 0 est générée. Ensuite, l'image vidéo de saut à l'heure 5s. Alors, quand video.currentTime = 10, image de image 5s est généré.

  • Qu'est-ce que theCanvas sur votre generateThumbnail fonction? Pouvez vous s'il vous plaît fournir les balises html, pour cette question, pour être le plus utile? Je suis en train de faire la même chose, mais je ne suis pas sûr de savoir comment theCanvas doivent être déclarés sur la page. Merci!
  • Salut Lin, avez-vous encore le code source de cette question, on vous a demandé? pouvez-vous nous fournir un lien?
InformationsquelleAutor Lin | 2013-10-04
  1. 48

    Cause

    Le problème est que la recherche de la vidéo (par la définition c'est currentTime) est asynchrone.

    Vous avez besoin pour écouter la seeked événement ou à défaut de quoi elle risque de prendre la réelle image actuelle qui est probablement votre ancienne valeur.

    Comme il est asynchrone, vous ne devez pas utiliser le setInterval() comme il est asynchrone trop et vous ne serez pas en mesure de synchroniser correctement lorsque l'image suivante a pour objectif d'. Il n'est pas nécessaire d'utiliser setInterval() que nous allons utiliser le seeked événement à la place qui permettra de garder le tout est synchronisé.

    Solution

    Par ré-écriture du code un peu, vous pouvez utiliser le seeked de l'événement pour aller à travers la vidéo de la capture de la bonne image que cet événement nous assure que nous sommes en fait au niveau de l'image, nous avons demandé par le réglage de la currentTime propriété.

    Exemple

    //global or parent scope of handlers
var video = document.getElementById("video"); //added for clarity: this is needed
var i = 0;

video.addEventListener('loadeddata', function() {
    this.currentTime = i;
});

    Ajouter ce gestionnaire d'événement pour la partie:

    video.addEventListener('seeked', function() {

    //now video has seeked and current frames will show
    //at the time as we expect
    generateThumbnail(i);

    //when frame is captured increase, here by 5 seconds
    i += 5;

    //if we are not passed end, seek to next interval
    if (i <= this.duration) {
        //this will trigger another seeked event
        this.currentTime = i;
    }
    else {
        //Done!, next action
    }
});

    Démo ici

    • J'ai essayé à l'aide de votre code. Maintenant j'ai un autre problème. En raison de tant recherchée, quand j'ai cherché la vidéo en cliquant sur la timeline, l'image est générée en tant que bien. Mais je n'en veux pas. Modifier j'ai résolu ce problème déjà. Je vous remercie.
    • video.currentTime = i; ne déclenche aucun cherché le cas pour moi.
    • avez-vous résolu votre problème de dos, alors?
    • non, malheureusement
    • Quels sont les navigateurs ne (ne) que vous utilisez? Ça fonctionne maintenant? Travail démo: jsfiddle.net/epistemex/gdp00x2s (le code d'origine, essayez aussi la version révisée du code ci-dessus)
    • oh, vous pouvez comparer réellement les images et assurez-vous qu'ils sont différents, avant d'afficher un "nouveau". voici un indice. developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/...
    • bien sûr, une méthode simple consiste à utiliser la "différence", le mélange est combiné avec de la saturation du filtre (0%) et de compter les pixels > 0. L'utilisation d'un seuil basé sur le pourcentage d'éviter trop de bruit/de compression de l'influence. Il y a toujours des chances pour les faux positifs, mais il peut réduire le nombre de différentes pouces si c'est un but (ou l'utilisation d'un intervalle plus long en fonction de l'objectif).
    • votre jsfiddle lien ne fonctionne pas. u peut plz post le lien correct. Je fais également avoir des cas d'utilisation pour capturer l'image. merci à l'avance.
    • Hii, Votre lien ne fonctionne pas semble lien est mort , pouvez vous s'il vous plaît fournir le code source pour cette solution?? merci
    • avez-vous trouvé le travail de la démo??
    • non, je n'ai pas à le trouver. le lien s'ouvre avec la page d'erreur 404 not found.
    • pas de soucis je l'ai trouvé quelque part en ligne

    InformationsquelleAutor