visualisation / cadre de recherche de cadre par cadre HTML5?

Question

Je suis à la recherche d'une façon de voir HTML5 <video>, image par image.

Le scénario:. Avoir une vidéo, avec un bouton supplémentaire qui permet de passer au prochain cadre quand elle est pressée

Que pensez-vous est la meilleure méthode pour le faire?

1. Lire la vidéo normalement, Ecouter événement timeUpdate, qui est sur FireFox appelée à chaque image , et puis juste faire une pause la vidéo. Cependant, les autres navigateurs ne se comportent pas comme Firefox.
2. Changer le élément de currentTime manuellement à +1/24 d'une seconde, où « 24 » est la fréquence d'image. Je ne sais pas comment le FPS aquire, cependant.
3. Toute autre façon utile que vous pouvez penser.

---

EDIT

J'ai trouvé cela très utile page de test HTML5 , qui permet de suivre la capacité de tous les navigateurs pour atteindre précis cadre recherche.

Answer 1

Il semble que la plupart des navigateurs permettent la seconde approche, bien que vous auriez besoin de connaître le taux de trame. Opera, cependant, est l'exception, et nécessite une approche similaire à votre premier (le résultat est parfait). Voici une page de démonstration je suis venu avec qui utilise un 29,97 images / s vidéo (standard de télévision américaine). Notez qu'il n'a pas été testé, il peut ne pas fonctionner dans IE 9, Firefox 4 ou versions futures de tout navigateur.

HTML:

<p id="time"></p>
<video id="v0" controls tabindex="0" autobuffer preload>
    <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
    <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
</video>

JavaScript (exécuté sur chargement de la page et utilise jQuery 1.4.4 par souci de concision):

var vid = $('#v0')[0];

vid.onplay = vid.onclick = function() {
    vid.onplay = vid.onclick = null;

    setTimeout(function() {
        vid.pause();
        setInterval(function() {
            if($.browser.opera) {
                var oldHandler = vid.onplay;
                vid.onplay = function() {
                    vid.pause();
                    vid.onplay = oldHandler;
                };
                vid.play();
            } else {
                vid.currentTime += (1 / 29.97);
            }
        }, 2000);
    }, 12000);

    setInterval(function() {
        $('#time').html((vid.currentTime * 29.97).toPrecision(5));
    }, 100);
};

Answer 2

Tout juste lutte contre ce même problème que je cam avec une méthode de force brute pour trouver le cadre rate.Knowing que le taux de trame ne sera jamais passer 60 images par seconde que je recherche dans la vidéo à 1 / 60e seconde. En comparant chaque image à la dernière en mettant la vidéo sur un élément de toile, puis en utilisant getImageData pour obtenir des données de pixels. Je le fais sur une seconde de la vidéo et compte alors le nombre total d'images uniques pour obtenir le taux de trame.

Vous ne devez pas vérifier chaque pixel. Je prends environ 2 / 3rds de l'intérieur de la vidéo, puis vérifier à propos de chaque pixel 8 à travers et vers le bas (selon la taille). Vous pouvez arrêter le comparer avec juste un autre seul pixel donc cette méthode raisonnablement rapide et fiable, pas par rapport à-dire la lecture d'une propriété framerate, mais mieux que deviner.

Answer 3

La meilleure chose que vous pouvez probablement faire jusqu'à ce que les normes sont confirmées et mises en œuvre (qui va être âges!) Est Devinez à la fréquence d'image et l'incrément à ce moment. Sauf si vous êtes dans un environnement contrôlé, je vous conseille de ne pas se fier fortement sur HTML5 ... autant que je l'aime ses fonctions, il ne sera pas fiable pris en charge.