Получить текущий кадр видео в javascript/jquery

Я воспроизвожу видео с помощью тега html video. Во время воспроизведения видео я хочу, чтобы текущий кадр видео не был "currentTime", используя jquery или javascript.

Я могу получить текущий кадр, выполнив вычисление fps видео и currentTime, но он не дает точного номера кадра. Любые идеи, как я могу это исправить?

Ответ 1

Я нашел причину этой проблемы. Я сжал свое видео, поэтому, сжав, fps уменьшается, поэтому я не смог получить правильные fps. Теперь я могу получить разницу в 1-2 кадра, но это нормально. Спасибо за помощь ребятам.

Ответ 2

Пожалуйста, посмотрите ниже демо. Только одно: вам нужно назначить frameRate видео. Внешние Js будут управлять всем, и вы можете легко получить номер кадра.

var currentFrame = $('#currentFrame');
var video = VideoFrame({
    id : 'video',
    frameRate: 29.97,
    callback : function(frame) {
        currentFrame.html(frame);
    }
});

$('#play-pause').click(function(){
    ChangeButtonText();
});

function ChangeButtonText(){
  if(video.video.paused){
        video.video.play();
        video.listen('frame');
        $("#play-pause").html('Pause');
    }else{
        video.video.pause();
        video.stopListen();
        $("#play-pause").html('Play');
    }
  }

<script src="https://rawgit.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div class="frame">  
  <span id="currentFrame">0</span>
  </div>

<video height="180" width="100%" id="video"> 
  <source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>

<div id="controls">
  <button id="play-pause">Play</button>
</div>

Ответ 3

Насколько я знаю, существует стандартная частота кадров в браузере или любой способ доступа к текущему кадру из коробки с видео html5. Однако вы можете использовать стандартную частоту кадров в 29,97 кадров в секунду и просто умножать ее на текущее время видео: (vid.currentTime * 29.97).toPrecision(6).

Надеюсь, это поможет u -

var vid = $('#video1')[0];
 $('#btn').bind('click', function() {
   $('#time').html((vid.currentTime * 29.97).toPrecision(6));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="btn">Get Frame</button><p id="time"></p>
<video id="video1" 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>

Ответ 4

Вы пытались использовать этот патч? https://github.com/X3TechnologyGroup/VideoFrame

Я верю, что это поможет вам.

Ответ 5

Изображение текущего кадра:

function captureVideo(video) {
    var canvas = document.createElement("canvas");
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    var canvasContext = canvas.getContext("2d");
    canvasContext.drawImage(video, 0, 0);
    return canvas.toDataURL('image/png');
}

Текущее время:

var frameAfterSeek = Math.floor(_video.currentTime);