javascript 视频缩略图预览

Question

我发现了一个非常有用的视频预览： http://www.cjboco.com/demo.cfm/project/cj-image-video-previewer/1.1.1/

我按照说明做了一个简单的 htm 页面。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery.cj_image_video_previewer.js"></script>
</head>
<body>
<div id="Videos" class="clearfix">
<div id="preview_01" class="thumbnail">
<img src="img/1.jpg" alt="Betty Boop" width="160" height="110" />
</div>
</div>
<script>
$(".Videos #preview_01").cjImageVideoPreviewer({
        "images": [
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg'
        ]
});
</script>
</body>
</html>

我 100% 确定路径是正确的。但是当我将鼠标悬停在图像上时，什么也没有发生。我错过了什么吗？

Answer 1

开始工作有点棘手，我建议按照说明进行操作，并提供此处 GitHub 存储库中的代码：https://github.com/cjboco/cj-image-video-previewer

还请记住包含正确的 JQuery 库和 CJ Image Video Previewer 库。在您提供的代码中，我没有看到 JQuery 库的源代码，这可能是问题的一部分。

如果您随后从 GitHub 中提供的示例开始并最小化代码，这是一个有效的简单示例：

<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"><![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<style type="text/css">
    .Videos {
        display: block;
        height: auto;
        width: 100%;
    }
    .Videos div.thumbnail {
        border: 1px solid #999;
        display: block;
        float: left;
        height: 110px;
        margin: 0px 10px 10px 0px;
        overflow: hidden;
        position: relative;
        width: 160px;
    }
    .Videos div.thumbnailBig {
        border: 1px solid #999;
        display: block;
        float: left;
        height: 240px;
        margin: 0px 10px 10px 0px;
        overflow: hidden;
        position: relative;
        width: 320px;
    }
</style>
</head>
<body>
    <div class="Videos clearfix">
        <div id="preview_01" class="thumbnail">
            <img src="https://placehold.it/160x110" alt="test image" width="160" height="110">
        </div>
    </div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://www.cjboco.com/projects/cj-image-video-previewer/1.1.1/demo/jquery.cj_image_video_previewer.js"></script>
<script>
(function($) {
    'use strict';

    $('#preview_01').cjImageVideoPreviewer({
        images: [
            'https://placehold.it/160x111',
            'https://placehold.it/160x112'
        ]
    });

}(jQuery));
</script>
</body>
</html>

希望对您有所帮助！

Answer 2

您可以安装 npm：video-metadata-thumbnails，然后像这样使用它：

import { getMetadata, getThumbnails } from 'video-metadata-thumbnails';

const thumbnails = await getThumbnails(blob, {
  interval: 1,
  start: 0,
  end: 1,
  quality: 0.6
});
console.log('Preview: ', thumbnails[0]);

javascript 视频缩略图预览

javascript video thumbnail preview

javascript

thumbnails

preview

hover