HTML5 visualisation image par image / recherche d’images?

Je cherche un moyen de visualiser HTML5 , image par image.

Le scénario: Avoir une vidéo, avec un bouton supplémentaire qui passe à l’image suivante lorsque vous appuyez dessus.

Selon vous, quelle est la meilleure méthode pour ce faire?

  1. Lisez la vidéo normalement, écoutez l’événement timeUpdate , qui sur FireFox est appelé pour chaque image, puis timeUpdate simplement la vidéo en pause. Cependant, les autres navigateurs ne se comportent pas comme Firefox.
  2. Changer l’élément currentTime manuellement à +1/24 de seconde, où “24” est la fréquence d’images. Je n’ai aucune idée de comment acquérir le FPS, cependant.
  3. Tout autre moyen utile que vous pouvez penser.

MODIFIER

J’ai trouvé cette page de test HTML5 très utile , qui suit la capacité de tous les navigateurs à rechercher des images précises.

Il semble que la plupart des navigateurs permettent la seconde approche, même si vous devez connaître la fréquence d’images. Opera, cependant, fait exception et nécessite une approche similaire à la première (le résultat n’est pas parfait). Voici une page de démonstration qui utilise une vidéo à 29,97 images / s (norme de télévision américaine). Notez qu’il n’a pas été testé de manière approfondie, de sorte qu’il pourrait ne pas fonctionner dans IE 9, Firefox 4 ou les versions futures de n’importe quel navigateur.

HTML:

 

JavaScript (exécuté au 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); }; 

Ayant juste combattu ce même problème, je trouve une méthode de force brutale pour trouver la fréquence d’images. Comparer chaque image à la dernière en plaçant la vidéo sur un élément canvas puis en utilisant getImageData pour obtenir des données de pixels. Je le fais sur une seconde de vidéo et comptez ensuite le nombre total d’images uniques pour obtenir la fréquence d’images.

Vous n’avez pas besoin de vérifier chaque pixel. Je saisis environ les 2/3 de l’intérieur de la vidéo et vérifie environ tous les 8 pixels de part et d’autre (en fonction de la taille). Vous pouvez arrêter la comparaison avec un seul pixel différent, donc cette méthode est relativement rapide et fiable, par rapport à la lecture d’une propriété frameRate, mais meilleure que de deviner.

La meilleure chose que vous puissiez probablement faire jusqu’à ce que les normes soient confirmées et mises en œuvre (ce sera très lointain!), C’est de deviner le taux de trame et d’augmenter à ce moment-là. À moins que vous ne soyez dans un environnement contrôlé, je vous déconseille de vous fier fortement à HTML5 … bien que j’adore ses fonctionnalités, il ne sera pas pris en charge de manière fiable.