Comment faire pour passer à l'image suivante et une image en arrière dans la lecture de la vidéo?

J'ai besoin de recherche pour certaines fonctions spéciales/motifs qui peuvent être visibles dans un seul (ou deux) de nombreux cadres. Le taux de trame peut être aussi lente que 25 images par seconde et la vidéo peut contenir plus de 7500 images. Je commence souvent par la numérisation de la vidéo à haute vitesse à la recherche pour un segment où je pourrais trouver la fonction, puis revenir en arrière. Je le répète cette procédure tout en réduisant progressivement la vitesse de lecture, jusqu'à ce que je trouve assez petite fenêtre de temps dans laquelle je peux m'attendre à trouver la fonction (si elle est présente). Je voudrais ensuite à l'étape de l'avant et vers l'arrière par les images à l'aide de la clé de frapper les événements (par exemple, flèche de droite et flèche gauche) pour trouver la fonction d'intérêts. J'ai réussi à utiliser HTML5 avec JavaScript pour contrôler la vitesse d'avancement; mais, ne savent toujours pas comment utiliser le clavier pour une seule photo à marcher en avant et en arrière à travers une vidéo. Comment cela peut-il être réalisé? Remarque, mon navigateur est Firefox 26 en cours d'exécution sur une plate-forme Windows 7.

OriginalL'auteur user2989402 | 2013-12-02

  1. 13

    Vous pouvez demander à tout moment dans la vidéo en définissant la propriété currentTime. Quelque chose comme ceci:

    var vidéo = document.getElementById('vidéo',),
    frameTime = 1 /25; //supposons 25 fps

    window.addEventListener('keypress', function (evt) {
    if (video.paused) { //or you can force it to pause here
        if (evt.keyCode === 37) { //left arrow
            //one frame back
            video.currentTime = Math.max(0, video.currentTime - frameTime);
        } else if (evt.keyCode === 39) { //right arrow
            //one frame forward
            //Don't go past the end, otherwise you may get an error
            video.currentTime = Math.min(video.duration, video.currentTime + frameTime);
        }
    }        
});

    Juste un couple de choses que vous devez être au courant, mais ils ne devraient pas vous causer trop de problèmes:

    1. Il n'y a aucun moyen de détecter le taux de trame, de sorte que vous devez coder en dur ou d'une liste d'une certaine table de recherche ou de deviner.

    2. La recherche peut prendre un peu de millisecondes ou plus et ne se fait pas de manière synchrone. Le navigateur a besoin de temps pour charger la vidéo à partir du réseau (si c'est pas déjà chargé) et de décoder l'image. Si vous avez besoin de savoir quand la recherche est terminée, vous pouvez écouter de la 'cherché' événement.

    Votre solution fonctionne très bien; mais, maintenant, il y a un autre problème. Je suis plutôt sûr que mon test vidéo à 25 fps (comme indiqué dans votre code) et je sais que le temps de cette vidéo est d'environ 25 secondes. Lorsque je passe ma souris sur la zone d'affichage vidéo, la barre de progression indique 0 à 0,25 --- Comment puis-je montrer que le temps total est de 25 sec pas de 0,25 sec?
    C'est bizarre. J'aurais du le voir. Pouvez-vous un lien vers une capture d'écran?
    Mon commentaire était incorrect --- l'heure affichée est correcte!
    Le temps entre les images peuvent être extraites à partir de vidéos AVI, qui peut ensuite être utilisé pour déterminer le nombre d'images par secnond. J'ai posté ceci link
    Sur 2. Si vous avez besoin d'une douceur cadre de la recherche de précharger le film avec xhr dans un blob et définissez la source avec la goutte. Remarque: Safari a des problèmes avec cela, mais vous pouvez l'encoder en base64 et de le définir comme une source là.

    OriginalL'auteur brianchirls