Question

我想从视频文件中提取我的海报图片，并希望在网页上使用该图片。

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

任何人都可以指导我怎么做吗？

Answer 1

取决于您想要进行处理的地方，还有几个选项

预处理选项 如果您对视频进行预处理，则可以使用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框架

Answer 2

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

从视频中提取海报图片

2 个答案: