从视频中提取海报图片 [英] Extract poster image from video

查看:466
本文介绍了从视频中提取海报图片的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I want to extract my poster image from the video file itself and wish to use that one on the web page.

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

My technology stack consists of spring mvc, hibernate, jpa, jQuery, jsp, html5, css3.

任何人都可以指导我如何做到这一点吗?

Can anyone guide me how to do that?

推荐答案

正如@sjm所建议的那样,我玩了Popcorn.capture并尝试了下面的代码来实现这个技巧

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>

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

The above code captures the image from 10th second of video and creates poster image for video.

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

这篇关于从视频中提取海报图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆