web-dev-qa-db-ja.com

JavaScript / jqueryでビデオの現在のフレームを取得する

HTMLビデオタグを使用してビデオを再生しています。ビデオの再生中、jqueryまたはjavascriptを使用して、ビデオの現在のフレームが "currentTime"ではないようにしたい.

ビデオのfpsとcurrentTimeの計算を行うことで現在のフレームを取得できますが、正確なフレーム番号がわかりません。これを修正する方法はありますか？

javascriptjqueryhtml5-videoframe-rate
15
siraj pathan

私はその問題の原因を見つけました。ビデオを圧縮していたため、圧縮中にfpsが減少したため、正しいfpsを取得できませんでした。これで、1〜2フレームの差で取得できますが、それで問題ありません。助けてくれてありがとう。

0
siraj pathan

以下のデモをご覧ください。 1つだけ、ビデオのframeRateを割り当てる必要があります。外部Jはすべてのものを管理し、フレーム番号を簡単に取得できます。

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>
7
Nirav Patel

現在のフレームの画像：

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);
2
bendyourtaxes

私の知る限り、ブラウザ間で標準のフレームレートが設定されているか、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>

再-あなたが画像フレームをキャプチャする必要がある場合、またはいくつかのカスタム作業をしたい場合-

Popcorn.capture と呼ばれる Popcorn.js プラグインがあり、HTML5ビデオの任意のフレームからポスターを作成できます。

一部のデモは here です。

ドメイン間で要求されたリソースのピクセルデータの読み取りを禁止するブラウザーによって課される制限があります（フレームの現在の値を記録するために canvas API を使用）。このアプローチを機能させるには、ソースビデオが、それを要求しているスクリプトおよびHTMLページと同じドメインでホストされている必要があります。

このプラグインを使用してポスターを作成するコードは非常に簡単です。

// This block of code must be run _after_ the DOM is ready
// This will capture the frame at the 10th second and create a poster
var video = Popcorn( "#video-id" );

// Once the video has loaded into memory, we can capture the poster
video.listen( "canplayall", function() {

  this.currentTime( 10 ).capture();

});
1
Abrar Jahin

このパッチを使用しようとしましたか？ https://github.com/X3TechnologyGroup/VideoFrame

私はそれがあなたを助けると信じています。

0
Eliran