小编ste*_*ven的帖子

如何生成用于 VideoJS 的视频预览缩略图?

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

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

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

我的视频播放器:

   <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>
Run Code Online (Sandbox Code Playgroud)

示例 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
Run Code Online (Sandbox Code Playgroud)

html ubuntu ffmpeg video.js

5
推荐指数
2
解决办法
1万
查看次数

标签 统计

ffmpeg ×1

html ×1

ubuntu ×1

video.js ×1