logo标签列表

从视频中提取海报图像

javascriptjavajqueryhtmlhtml5-video
4

我希望从视频文件中提取海报图像，并希望在网页上使用这个图像。

我的技术栈包括spring mvc、hibernate、jpa、jQuery、jsp、html5和css3。

有人可以指导我如何做吗？

3个回答
8
取决于您要在哪里进行处理，这里有几个选项： 预处理选项 如果您要对视频进行预处理，可以使用Grunt使用https://github.com/sjwilliams/grunt-responsive-videos生成不同的视频格式/大小/图像。 客户端选项 如果您需要在客户端生成它，可以使用像Popcorn.capture这样的东西，只要您自己托管视频文件，否则您将遇到同源策略问题。请参见https://github.com/rwaldron/popcorn.capture 服务器选项 如果您想要在服务器端生成它，则Humble-Video https://github.com/artclarke/humble-video是一个用于处理视频文件的Java框架。
我正在尝试使用一些示例视频来使用Popcorn.capture进行工作，但是在使用过程中遇到了困难。 - Balwinder Singh
3

根据@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>

以上代码从视频的第10秒捕获图像并为视频创建海报图像。

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

1

可以使用HTML5和Canvas实现

Github 这里

在这里查看演示这里

更多详情请看 - 使用Canvas从HTML5视频创建屏幕截图

enter image description here

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

确保您的视频源正确。

如何解决从视频生成图像时出现的SecurityError问题。我尝试将以下代码添加到程序中：v.setAttribute('crossOrigin','anonymous'); - Akshay Hazari
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接