HTML5 покадровый просмотр / покадровый поиск? - PullRequest
Новая
       6

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

49 голосов
/ 28 ноября 2010

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

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

Какой, по вашему мнению, лучший способ сделать это?

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

EDIT

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

Ответы [ 3 ]

28 голосов
/ 04 декабря 2010

Кажется, что большинство браузеров допускают второй подход, хотя вам нужно знать частоту кадров. 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);
};
8 голосов
/ 18 сентября 2014

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

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

1 голос
/ 04 декабря 2010

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

...