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

问题描述

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

我希望他们是一些我错过的插件，能够做到这一点，但还没有找到.我想出的最好方法是从 mp4 文件中提取缩略图，将其组合成精灵图像，然后使用 #xywh 属性.

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

我的视频播放器:

 
<video id="video" class="vjs-16-9 video-js vjs-default-skin vjs-big-play-central"控制 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">要观看此视频，请启用 Javascript.</a></p></视频>

示例 vtt 文件:

WEBVTT00:00:00.000 -->00:00:03.000缩略图.jpg#xywh=0,0,120,6800:00:03.000 -->00:00:06.000缩略图.jpg#xywh=120,0,120,6800:00:06.000 -->00:00:09.000缩略图.jpg#xywh=240,0,120,68

解决方案

很惊讶我没有收到一条评论/答案.无论哪种方式，经过几天的努力，我都能找到一个可行的解决方案.起初我认为解决方案将使用 ffmpeg，但是虽然它确实有效，但速度非常慢.我最终在 here.该工具能够在大约 6 秒内从两小时的电影中创建一个精灵图像.我在 php 中使用 shell_exec 函数和 -v(详细)选项来解析每个缩略图的时间:

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

在那里，创建必要的 WebVTT 文件是简单的逻辑、解析和数学运算.除了必须在 shell_exec 中使用 mtn 之外，所有这些都是在 php 中完成的.

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

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

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.

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.

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.

My video player:

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

Sample vtt file:

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

解决方案

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

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屋！