web-dev-qa-db-fra.com

Obtenir l'image actuelle de la vidéo en javascript/jquery

Je joue la vidéo en utilisant le tag vidéo html. Pendant la lecture d'une vidéo, je veux que l'image actuelle de la vidéo ne soit pas "currentTime" en utilisant jquery ou javascript. 

Je peux obtenir l'image actuelle en calculant le nombre d'images par seconde de la vidéo et de currentTime, mais cela ne donne pas le numéro exact de l'image. Des idées comment je peux résoudre ce problème?

javascriptjqueryhtml5-videoframe-rate
12
siraj pathan

J'ai trouvé la cause de ce problème. Alors que je compressais ma vidéo, la compression est réduite, ce qui explique pourquoi je n'ai pas pu obtenir une résolution correcte. Maintenant, je peux obtenir la différence avec une ou deux images, mais ça va. Merci pour votre aide les gars.

0
siraj pathan

S'il vous plaît vérifier ci-dessous démo. Une seule chose est que vous devez attribuer un frameRate de vidéo. Les Js externes gèrent tout et vous pouvez facilement obtenir le numéro de trame.

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>

6
Nirav Patel

À ma connaissance, il existe un nombre d'images par seconde standard défini pour tous les navigateurs ou un moyen quelconque d'accéder au cadre actuel par le biais d'une vidéo html5. Ce que vous pouvez faire, c’est utiliser le débit d’image standard de la télévision, qui est de 29,97 images par seconde, et le multiplier par le temps actuel de la vidéo, comme suit: (vid.currentTime * 29.97).toPrecision(6).

J'espère que cela peut vous aider

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>

Re - Si vous devez capturer un cadre d’image ou si vous souhaitez effectuer des travaux personnalisés -

Il existe un Popcorn.js plugin appelé Popcorn.capture qui vous permettra de créer des affiches à partir de n’importe quelle image de votre vidéo HTML5.

Certaines démos sont données ici .

Il existe une limitation imposée par le navigateur qui interdit la lecture des données de pixels des ressources demandées sur plusieurs domaines (à l'aide de canvas API pour enregistrer la valeur actuelle d'une image). La vidéo source doit être hébergée sur le même domaine que le script et la page HTML qui le demande pour que cette approche fonctionne.

Le code pour créer un poster en utilisant ce plugin est assez simple:

// 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

avez-vous essayé d'utiliser ce patch? https://github.com/X3TechnologyGroup/VideoFrame

je crois que cela vous aidera. 

0
Eliran

Image du cadre actuel:

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

Heure actuelle:

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