javascript 视频缩略图预览答案

【问题标题】：javascript video thumbnail previewjavascript 视频缩略图预览
【发布时间】：2017-09-13 00:58:24
【问题描述】：

我发现了一个非常有用的视频预览： 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% 确定路径是正确的。但是当我把鼠标悬停在图像上时，什么也没有发生。我错过了什么吗？

【问题讨论】：

您的浏览器控制台是否出现任何错误？
我曾经是但与其他代码相关，现在我将所有代码压缩到尽可能简单。只是为了让它工作，所以现在我没有错误。

标签： javascript hover thumbnails preview

【解决方案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>

希望这会有所帮助！

【讨论】：

非常感谢，是的，我忘记包含 jquery，但即使我在我的页面中添加它仍然无法正常工作。顺便说一句，如果我使用您的代码，它可以正常工作。只要我有空闲时间，我就会调查为什么我的代码不起作用而你的代码起作用。再次感谢。
没问题，很高兴能帮上忙，是的，让这个工作起来确实很棘手，很高兴它对你有用。

【解决方案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]);

【讨论】：