javascript 从视频中提取海报图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32262562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Extract poster image from video
提问by Balwinder Singh
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.
我的技术栈包括 spring mvc、hibernate、jpa、jQuery、jsp、html5、css3。
Can anyone guide me how to do that?
谁能指导我如何做到这一点？
回答by sjm
Depends where your wanting to do the processing, heres a couple of options
取决于你想在哪里进行处理，这里有几个选项
Pre-processing OptionIf your preprocessing your video, you can use Grunt to generate different video formats/sizes/images with https://github.com/sjwilliams/grunt-responsive-videos
预处理选项如果你预处理你的视频，你可以使用 Grunt 生成不同的视频格式/大小/图像https://github.com/sjwilliams/grunt-responsive-videos
Client-side OptionIf 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
客户端选项如果你想在客户端生成它，你可以使用类似 Popcorn.capture 的东西，只要你托管自己的视频文件，否则你会遇到同源策略问题。见https://github.com/rwaldron/popcorn.capture
Server-side OptionIf you wanting to generate it Server-side, Humble-Video https://github.com/artclarke/humble-videois a Java framework to work with video files
服务器端选项如果你想在服务器端生成它，Humble-Video https://github.com/artclarke/humble-video是一个处理视频文件的 Java 框架
回答by Balwinder Singh
As suggested by @sjm, I played around with Popcorn.capture and tried the following code which does the trick
正如@sjm 所建议的，我玩弄了 Popcorn.capture 并尝试了以下代码来解决问题
<!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.
上面的代码从视频的第 10 秒捕获图像并为视频创建海报图像。
You can get popcorn.capture.js from https://github.com/rwaldron/popcorn.capture/tree/master/src
你可以从https://github.com/rwaldron/popcorn.capture/tree/master/src获取 popcorn.capture.js
回答by kiranvj
Its possible using html5 and canvas
它可以使用 html5 和 canvas
Github here
Github在这里
See it in action here
在这里查看它的实际效果
More details here - CREATING SCREENGRABS FROM HTML5 VIDEO WITH CANVAS
此处有更多详细信息 -使用 CANVAS 从 HTML5 视频创建屏幕截图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Taking screengrabs from video in Canvas</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
*{margin:0;padding:0;font-size:15px;font-family:calibri,arial,sans-serif}
footer,section,header{display:block;}
body{padding:2em;background:#666;color:#fff;}
h1{font-size:24px;margin:10px 0;}
h2{font-size:18px;margin:10px 0;color:lime;}
canvas{display:block;border:2px solid #000;}
#video,#canvas{float:left;padding-right:10px;}
#video{width:640px;}
#save li{list-style:none;margin:0;padding:0}
#save{clear:both;padding:10px 0;overflow:auto;}
#save img{float:left;padding-right:5px;padding-bottom:5px;}
footer a{color:lime;}
footer p{margin:5em 0 1em 0;padding:1em 0;border-top:1px solid #999}
</style>
</head>
<body>
<header><h1>Taking screengrabs from video in Canvas (Chrome, Mozilla, Opera, Safari - maybe IE (got no windows))</h1></header>
<section>
<p>Simply play the video. Every time you pause, you can see the screenshot on the right. Click the screenshot to store it in your collection below.</p>
<div id="video">
<h2>The Video:</h2>
<video controls>
<source src="meetthecubs.mp4" type="video/mp4"></source>
<source src="meetthecubs.webm" type="video/webm"></source>
</video>
</div>
<div id="canvas">
<h2>Preview (click to store images below):</h2>
<canvas></canvas>
</div>
<div id="save">
<h2>Your saved images:</h2>
<ul></ul>
</div>
</section>
<footer>
<p>Written by
<a href="http://wait-till-i.com/">Chris Heilmann</a> -
<a href="http://twitter.com/codepo8">@codepo8</a>
</p>
</footer>
<script>
(function(){
var v = document.querySelector('video'),
n = document.querySelector('source').src.replace(/.*\/|\..*$/g,''),
c = document.querySelector('canvas'),
save = document.querySelector('#save ul'),
ctx = c.getContext('2d');
v.addEventListener('loadedmetadata',function(ev){
var ratio = v.videoWidth/v.videoHeight,
w = 400,
h = parseInt(w / ratio, 10),
time = 0,
img = null,
li = null;
c.width = w;
c.height = h + 40;
v.addEventListener('timeupdate',function(ev){
if(v.paused){
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, w, h);
ctx.drawImage(v, 0, 40, w, h);
ctx.font = '20px Calibri';
ctx.fillStyle = 'lime';
ctx.fillText(n, 5, 20);
time = format(v.currentTime);
ctx.fillStyle = 'white';
ctx.fillText(time, 395 - ctx.measureText(time).width, 20);
}
},false);
c.addEventListener('click',function(ev){
li = document.createElement('li');
img = document.createElement('img');
li.appendChild(img);
save.appendChild(li);
img.src = ctx.canvas.toDataURL('image/png');
},false);
},false);
function format(time){
var hours = parseInt((time / 60 / 60) % 60, 10),
mins = parseInt((time / 60) % 60, 10),
secs = parseInt(time, 10) % 60,
hourss = (hours < 10 ? '0' : '') + parseInt(hours, 10) + ':',
minss = (mins < 10 ? '0' : '') + parseInt(mins, 10) + ':',
secss = (secs < 10 ? '0' : '') +(secs % 60),
timestring = ( hourss !== '00:' ? hourss : '' ) + minss + secss;
return timestring;
};
})();
</script>
</body>
</html>
Make sure you have the video source correct.
确保您的视频源正确。
