如何生成视频预览缩略图以在VideoJS中使用? [英] How to generate video preview thumbnails for use in VideoJS?

问题描述

我移到了VideoJs(html5)，需要弄清楚如何为搜索栏生成缩略图.我试过使用videojs-thumbnails，但是这需要预先加载带有sprite图像的vtt文件.我正在尝试找出一种自动为常规mp4(h264)文件加载缩略图的方法. Flowplayer能够使用自己的视频来做到这一点，现在试图弄清楚如何使用VideoJ.

I moved over to VideoJs (html5) and need to figure out how to generate thumbnails for the seekbar. I have tried using videojs-thumbnails, however that requires having a preloaded vtt file with a sprite image. I'm trying to figure out a way to automatically load thumbnails for a regular mp4 (h264) file. Flowplayer was able to do this with it's own videos, trying now to figure out how to do it with VideoJs.

我希望他们是我错过的某个插件，能够执行此操作，但尚未找到它.我发现最好的方法是从mp4文件中提取缩略图，将其合并为图片图像，并使用#xywh属性.

I was hoping their was some plugin that I missed that was capable of doing this, but have yet to find it. The best I figured out was to extract the thumbnails from the mp4 file, combine it into a sprite image, and use the #xywh attribute.

如果VideoJS中没有自动执行此操作的插件，我可以使用哪个命令行程序在Ubuntu上使用Sprite映像创建VTT文件?我正在处理大量视频文件，因此手动操作是不可行的.

If there is no plugin that automatically does this in VideoJS, what command line program can I use to create a VTT file with sprite image on Ubuntu? I am dealing with lots of video files, so doing it manually just isn't feasible.

我的视频播放器:

   <div class="video_player_js" style="width:auto; height:auto;">
  <video id="video" class="vjs-16-9 video-js vjs-default-skin vjs-big-play-centered"
    controls preload="auto" width="auto" height="auto"
    data-setup='{"fluid": true}'>
    <source src="test.mp4" type="video/mp4" />
    <track kind="metadata" src="thumbnails.vtt"></track>
    <p class="vjs-no-js">To view this video enabled Javascript.</a></p>
  </video>

样本vtt文件:

WEBVTT

00:00:00.000 --> 00:00:03.000
thumbnails.jpg#xywh=0,0,120,68

00:00:03.000 --> 00:00:06.000
thumbnails.jpg#xywh=120,0,120,68

00:00:06.000 --> 00:00:09.000
thumbnails.jpg#xywh=240,0,120,68

推荐答案

惊讶的是，我没有得到任何评论/答案.无论哪种方式，花了几天的时间我都可以找到一个可行的解决方案.起初我以为解决方案将使用ffmpeg，但是虽然它确实起作用了，但是速度却非常慢.我最终发现这里.该工具能够在大约6秒钟内从两小时的电影中创建精灵图像.我将PHP中的shell_exec函数与-v(详细)选项一起使用，以便解析出每个缩略图的时间，例如:

Surprised I didn't get a single comment/answer. Either way, after taking quite a few days I was able to find a working solution. At first I thought the solution would be using ffmpeg, however while it did work it was drastically slow. I eventually found the linux tool (available in Windows as well) called mtn (Movie Thumbnailer) found here. This tool was able to to create a sprite image from a two hour movie within about 6 seconds. I used the shell_exec function in php with the -v (verbose) option in order to parse out the time of each thumbnail as such:

mtn -v -P -s 60 .jpg file.ext 2>&1

创建所需的WebVTT文件后，只需进行简单的逻辑，解析和数学运算即可.所有这些都是在php中本机完成的，除了必须在shell_exec中使用mtn.

Once there, it was simple logic, parsing, and math to create the necessary WebVTT file. All of this was done in php natively with the exception of having to use mtn with shell_exec.

此解决方案效果很好，非常准确.唯一真正的问题是，用户必须等待几秒钟才能准备好观看视频.我目前正在寻找以下选项:首先加载视频，在后台生成缩略图，然后在准备好后将其合并到视频源中.

This solution works great and is pretty accurate. The only real issue is that the user has to wait a couple of seconds before the video is ready to be watched. I am currently looking at options to load the video first, generate the thumbnails in the background, and incorporate it into the video source once ready.

我希望该解决方案可以帮助需要动态为其视频播放器生成缩略图的其他人.

I hope this solution helps anyone else out there that needs to dynamically generate thumbnails for their video player.

这篇关于如何生成视频预览缩略图以在VideoJS中使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！