从视频中提取海报图片

0

工作正如@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>

以上代码从视频的第十第二捕获的图像和用于视频创建海报图像。

您可以从https://github.com/rwaldron/popcorn.capture/tree/master/src

来源

2015-08-28 05:07:02

1

它可能使用HTML5和帆布

Github上here

看到它在行动here

更多细节在这里 - CREATING SCREENGRABS FROM HTML5 VIDEO WITH CANVAS

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

确保您有正确的视频源。

来源

2015-08-28 03:01:35 kiranvj

+0

得到popcorn.capture.js如何删除其中的背景下，从视频图像产生一个SecurityError。我尝试将此代码添加到代码'v.setAttribute（'crossOrigin'，'anonymous'）;' –

3

取决于在您想要做的处理，继承人几个选项

预处理选项 如果预处理你的视频，你可以用咕噜生成与https://github.com/sjwilliams/grunt-responsive-videos不同的视频格式/尺寸/图片

客户端选项 如果你想生成它的客户端，你可以只要使用类似Popcorn.capture为您托管自己的视频文件，否则你会遇到同样的原产地政策的问题。见https://github.com/rwaldron/popcorn.capture

服务器端选项 如果你想生成它的服务器端，谦逊视频https://github.com/artclarke/humble-video是一个Java框架与视频文件

来源

2015-08-28 03:13:02 sjm

+0

我试图用一些示例视频与Popcorn.capture一起使用。但努力使用它。 –

从视频中提取海报图片

回答

相关问题