Menu
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?
657
Depends where your wanting to do the processing, heres a couple of options
Pre-processing Option If your preprocessing your video, you can use Grunt to generate different video formats/sizes/images with https://github.com/sjwilliams/grunt-responsive-videos
Client-side Option If your wanting to generate it client-side, you can use something like Popcorn.capture as long as your hosting your own Video file, otherwise you will run into the Same Origin Policy issue. See https://github.com/rwaldron/popcorn.capture
Server-side Option If you wanting to generate it Server-side, Humble-Video https://github.com/artclarke/humble-video is a Java framework to work with video files
86
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
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With