HTML5 покадровый просмотр/поиск кадров?

Я ищу способ просмотра HTML5 <video>, покадровый.

Сценарий: наличие видео с дополнительной кнопкой, которая при нажатии переходит к следующему кадру.

Как вы думаете, лучший метод для этого?

  • Воспроизведение видео обычно, прослушивание события timeUpdate, которое в FireFox вызывается для каждого кадра, а затем просто приостанавливает видео. Однако другие браузеры не ведут себя как Firefox.
  • Измените элемент currentTime вручную на +1/24 секунды, где "24" - это частота кадров. Однако я не знаю, как получить доступ к FPS.
  • Любой другой полезный способ, о котором вы можете думать.

ИЗМЕНИТЬ

Я нашел эту очень полезную тестовую страницу HTML5, которая отслеживает способность всех браузеров добиваться точного поиска кадров.

Ответы

Ответ 1

Кажется, что большинство браузеров допускают второй подход, хотя вам нужно знать частоту кадров. Однако Opera является исключением и требует подхода, аналогичного вашему первому (результат не идеальный). Здесь представлена ​​демонстрационная страница в которой используется видеофрагмент 29,97 кадров в секунду (телевизионный стандарт США). Обратите внимание, что он не был широко протестирован, поэтому он может не работать в IE 9, Firefox 4 или будущих версиях любого браузера.

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 (запускается на загрузку страницы и использует jQuery 1.4.4 для краткости):

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);
};

Ответ 2

Как только мы боролись с этой самой проблемой, я разыгрываю метод грубой силы, чтобы найти частоту кадров. Знание того, что частота кадров никогда не пройдет 60 кадров в секунду, я просматриваю видео на 1/60-й секундах. Сравнивая каждый кадр с последним, помещая видео в элемент canvas, а затем используя getImageData для получения данных пикселей. Я делаю это за секунду видео, а затем подсчитываю общее количество уникальных кадров, чтобы получить частоту кадров.

Вам не нужно проверять каждый пиксель. я Захватите около 2/3rds внутри видео, а затем проверьте каждый восьмой пиксель взад и вперед (в зависимости от размера). Вы можете остановить сравнение только с одним пикселем, чтобы этот метод был достаточно быстрым и надежным, но не сравнивался с чтением свойства frameRate, но лучше, чем гадание.

Ответ 3

Лучшее, что вы, возможно, сможете сделать до тех пор, пока стандарты не будут подтверждены и не будут реализованы (это будет возраст!), к этому времени угадывают скорость кадров и прирост. Если вы не находитесь в контролируемой среде, я бы посоветовал не полагаться на HTML5... насколько мне нравятся его функции, он не будет надежно поддержан.