如何在悬停在进度条上时生成视频缩略图并预览它们？

Question

我想生成视频缩略图并在像 YouTube 视频一样悬停在进度条上时进行预览：

我尝试使用videojs-thumbnails进行测试，但失败了。该README文件不包含足够的信息来修复它。

我还尝试使用关键字在 Google 上进行搜索：video thumbnail progress bar。有一些关于 SO 的相关问题，但我找不到这种情况的解决方案。

我找到了一个 javascript 库videojs，其中包含悬停在​​进度条上的事件：

videojs('video').ready(function () {
    $(document).on('mousemove', '.vjs-progress-control', function() { 
        // How can I generate video thumbnails and preview them here?
    });
});

Answer 1

目前（2019 年 12 月），支持悬停在视频进度条上时添加缩略图的 javascript（免费版和付费版）库并不多。

但是你可以在videojs. 他们已经支持在视频进度条上悬停时添加工具提示。您可以做的所有其他事情就是生成视频缩略图并将它们添加到控制栏中进行预览。

在这个例子中，我们将解释如何从<input type="file" />. 虽然我们可以使用直接链接的视频源，但在测试期间，我们有一些问题，因为使用了被污染的画布可能无法导出canvas.toDataURL()

后videojs完成初始化，您可以克隆从源新的视频并将其追加到身体。只是为了玩和捕捉loadeddata事件：

videojs('video').ready(function () {
    var that = this;

    var videoSource = this.player_.children_[0];

    var video = $(videoSource).clone().css('display', 'none').appendTo('body')[0];

    video.addEventListener('loadeddata', async function() { 
        // asynchronous code...
    });

    video.play();
});

像 YouTube 视频缩略图一样，我们将生成缩略图文件作为图像。此图像的大小为：

(horizontalItemCount*thumbnailWidth)x(verticalItemCount*thumbnailHeight) = (5*158)x(5*90)

790x450包含 25 个子缩略图的图像大小也是如此（YouTube158用作缩略图的宽度和90高度）。像这样：

然后，我们将根据视频时长拍摄视频快照。在这个例子中，我们每秒生成一个缩略图（每一秒都有一个缩略图）。

因为根据视频时长和质量，生成视频缩略图需要很长时间，所以我们可以制作一个深色主题的默认缩略图等待。

.vjs-control-bar .vjs-thumbnail {
  position: absolute;
  width: 158px;
  height: 90px;
  top: -100px;
  background-color: #000;
  display: none;
}

获取视频时长后：

var duration = parseInt(that.duration());

我们需要int在循环中使用之前将其解析为 an ，因为该值可能是14.036。

其他一切都是：设置currentTime新视频的值并将视频转换为画布。

因为1个canvas元素默认最多可以包含25张缩略图，所以我们要一一添加25张缩略图到canvas （从左到右，从上到下）。然后我们将它存储在一个数组中。

如果还有另一个缩略图，我们创建另一个画布并重复操作

videojs('video').ready(function () {
    var that = this;

    var videoSource = this.player_.children_[0];

    var video = $(videoSource).clone().css('display', 'none').appendTo('body')[0];

    video.addEventListener('loadeddata', async function() { 
        // asynchronous code...
    });

    video.play();
});

.vjs-control-bar .vjs-thumbnail {
  position: absolute;
  width: 158px;
  height: 90px;
  top: -100px;
  background-color: #000;
  display: none;
}

var duration = parseInt(that.duration());

小提琴