I want to extract my poster image from the video file itself and wish to use that one on the web page.
My technology stack consists of spring mvc, hibernate, jpa, jQuery, jsp, html5, css3.
Can anyone guide me how to do that?
As suggested by @sjm, I played around with Popcorn.capture and tried the following code which does the trick
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<title>Popcorn.capture.js Functional Examples</title>
<script src=http://cdn.popcornjs.org/code/dist/popcorn.min.js></script>
<script src=../src/popcorn.capture.js></script>
</head>
<body onload=myFunction()>
<div id=unmoved-fixture>
<video height=180 width=300 id=video-target controls>
<source src=assets/popcorntest.mp4></source>
<source src=assets/popcorntest.ogv></source>
<source src=assets/popcorntest.webm></source>
</video>
</div>
<pre>
</pre>
<script>
function myFunction() {
var $pop = Popcorn( #video-target ),
poster;
$pop.capture({
at: 10
});
}
</script>
</body>
</html>
The above code captures the image from 10th second of video and creates poster image for video.
You can get popcorn.capture.js from https://github.com/rwaldron/popcorn.capture/tree/master/src
