Bilibili，B站视频缩略图快速预览的实现

Chrome插件实现B站视频缩略图快速预览

原创已于 2025-04-08 11:52:02 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #视频

于 2024-10-14 20:12:37 首次发布

在播放视频的时候，如果能有一种方法，能够快速预览视频全貌，将是很方便的：哪些视频一扫而过，哪些视频信息量大、需要细看，一目了然。

于是开发了一套 chrome 插件，使用效果是：在播放B站视频时，能快速显示视频的所有缩略图，甚至相关字幕。

截图如下：

有需要的可以下载使用：vector090/sharing - Gitee.com

感谢下面文章提供分析思路：

Bilibili，B站视频缩略图快速预览实现再分析_b站预览图准确定位-优快云博客

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

vector090

关注关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

基于flowplayer的视频缩略图的视频预览

bingcool

02-02

4291

前言不得不吐槽一下咯，年终奖发了不到半个月的工资，心醉了，心凉了！不过技术知识是属于自己的东西，有新的想法，学到新的知识还是的总结出来，和大家分享分享！最近一直在忙公司的项目，主要针对视频播放这一块，说具体点是关于flowplayer的这一块。上一篇《基于web的视频在线编辑》已经简单总结了一下flowplayer的强大功能。今天的主角就是基于flowplayer的视频预览，如何实现？

windows 电脑图片/视频不展示预览图

最新发布

06-15

# 基于JavaScript的B站评论分析Chrome插件 ## 项目简介本项目是一个简单的Chrome插件，旨在帮助用户下载B站评论并进行分析。通过提取视频关键字和图表展示，用户可以更直观地了解评论内容。插件开发过程中涉及了Chrome插件的注册、技术选型、UI设计以及审核等关键问题。 ## 项目的主要特性和功能 1. 评论下载用户可以下载B站视频的评论数据。 2. 关键字提取从评论中提取出关键词，帮助用户快速了解评论内容。 3. 图表展示通过图表形式展示评论数据，提供更直观的分析结果。 4. 自动刷新使用Plasmo库实现代码修改后的自动刷新功能，提升开发效率。 5. 多框架支持支持React、TypeScript等现代前端框架进行开发。 ## 安装使用步骤 1. 下载源码确保你已经下载了本项目的源码文件。 2. 安装依赖在项目根目录下运行以下命令安装必要的依赖。 shell npm install

【亲测免费】视频缩略图生成插件推荐

gitblog_00458的博客

11-29

1029

bilibili ,B站视频预览缩略图实现分析

ucsheep-You see sheep!

10-21

9770

因为需要对抓取到的B站视频播放源进行预览，所以对B站视频预览进行了分析。 1.设想我们一般会认为，一个视频入库，首先转码，完成切分。当用户播放时，分片请求，快速响应。请求预览缩略图，会认为是直接传指针在进度条的时间向服务端请求这个时间点的画面，然后在界面显示。 2.验证按照设想，那指针在进度条的每一次移动，都会触发一次请求。然而，现实狠狠地打来一个巴掌。并不是我们想象的那样。页面加载完毕，清...

WIN7实现所有视频格式的预览-产生缩略图

08-11

K-Lite_Codec_Pack_630_64bit K-Lite_Codec_Pack_880_Mega 现在很多电脑都预装win7的64位了，win7的有一个功能就是实现了资源管理器的mp4等格式视频缩略图预览功能，但是却有不支持rmvb、flv等常见格式的视频缩略图预览及播放功能，让人感觉有些遗憾，再此用K-Lite_Codec_Pack这个软件即可实现win7资源管理器对各种视频格式的缩略图预览及wmp12对各种格式视频文件的播放支持。当你安装k-lite后你会惊奇的发现不但解决了上面两个问题，而且也实现了windows media center与Windows Live 照片库对这些格式视频的支持。

Bilibili，B站视频缩略图快速预览实现再分析

ucsheep-You see sheep!

10-21

5817

之前的这篇文章曾经有过一次分析在B站视频搜索结果中，可以在不进入视频的状态下对视频快速预览。今天详细分析和复现一下实现过程 1.首先，获取某视频的完整缩略图资源通过下面接口获取 https://api.bilibili.com/x/player/videoshot?index=1&aid=XXX 以 https://www.bilibili.com/video/av8370807...

关于实现视频预览缩略图功能

printf_scnaf的博客

08-27

3459

实现所需环境工具功能官方地址 FFmpeg 对视频音频处理的”瑞士军刀“ http://ffmpeg.org ImageMagick 在这里负责合并图片 https://imagemagick.org/index.php 需求分析实现哔哩哔哩视频缩略图的效果 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传猜想随着鼠标移动，请求对应封面图一次请求完毕，获得一张大图设置为背景，随着鼠标移动调整元素的background-position 观察现

前端视频预览功能的实现

_Kiwi_berry的博客

09-26

4326

这是我模仿B站所写项目遇到的第二个很有挑战性的部分，网上的资料比较缺乏，还是大佬室友换了个关键词才搜到比较有用的资料hh。之前没有写过视频相关的项目，所以视频相关的API都十分陌生。从最开始的一无所知，一步步查资料，理解代码，进行修改，解决代码，最后实现的时候感觉非常有成就感。网上能找到的相关插件是用angular.js实现（现在基本被vue，react替代）,跟我使用技术栈冲突，无法直接引用插件，而且很多技术细节没有文字解释，阅读比较困难。

快速查看网页缩略图大图的PhotoShow浮图秀插件

- **优雅查看B站视频封面**：特指对B站（Bilibili）视频封面图片的优化预览功能，强调其在特定网站上的使用效果。 - **插件开发者** - **@Vincent Wang**：提供了开发者信息，如果用户需要技术支持或反馈问题，...

Windows资源管理器视频音频缩略图插件

02-02

Icaros是一款免费实用的资源管理器视频扩展增强插件，它能让你的 Windows 支持显示大部分主流视频格式文件的预览缩略图，其中包括 mkv、flv、avi、mp4、mov、rmvb、m2ts、ogm 等等！此外，如果一些音频文件如 Flac、APE、ogg 等包含CD专辑封面的话，Icaros 也能让其显示出封面图片……

bilibili排行榜+播放（简陋版）

10-28

考虑到“简陋版”的描述，开发者可能还没有实现高级功能，比如分页加载更多视频、搜索功能、视频预览缩略图、用户评论、播放控制（如暂停、快进、快退）等。此外，可能也没有集成B站的API来实时获取最新的排行榜数据...

B站首页界面设计教程及素材下载

- **交互**：B站的交互设计重视动画效果的使用，例如视频缩略图在鼠标悬停时会有放大预览的动画，为用户提供了直观的操作反馈。 ### 知识点五：B站首页界面实现技术 - **前端技术**：B站首页的设计主要采用HTML、...

【Coze快速指南】：只需5分钟，快速掌握历史人物视频制作

[【Coze快速指南】：只需5分钟，快速掌握历史人物视频制作](https://static.wixstatic.com/media/d8a647_1ac69b83fe3c4441967786cc76141383~mv2_d_2560_1440_s_2.jpg/v1/fill/w_1000,h_563,al_c,q_85,usm_0.66_1.00_...

个人搭建云盘nextcloud实现视频文件预览缩略图

XIAOXIANG233233的博客

02-06

1976

默认情况下，nextcloud的视频文件是没有预览缩略图的，这很不方便为实现视频文件生成预览缩略图，需要以下两步。

电脑的视频文件缺少缩略图？一个插件就可以搞定

weixin_47112527的博客

02-12

6073

解决电脑里面的视频没有缩略图的问题

gitblog_00095的博客

06-01

1466

使用FFmpeg生成视频的预览图缩略图

blovecat的博客

04-17

3547

介绍是会选择典型帧，而不是固定帧，测试下来确实是和上面命令结果不一样（执行耗时也更长，应该涉及到选择计算，n的值越大需要的内存就越高，这里需要谨慎选择），具体是根据什么规则选择帧的有兴趣的同学可以研究下源码，顺便告诉我下哈哈。这里使用thumbnail命令可以达到同样效果，区别是thumbnail根据。

1款系统显示音视频缩略图，Windows 必备！

多多神器

04-13

1248

它几乎支持所有的视频文件类型的缩略图，在它可选的视频文件类型中，简单添加一下，然后重新 ‘激活 Icaros’ 即可生效。工具除了支持显示视频缩略图之外，还能支持显示Flac、APE、MPC等无损音乐格式的封面图片。操作功能非常简单，就是让Windows资源管理器能支持更多视频格式的预览缩略图显示。链接：https://pan.quark.cn/s/705c4cf6b234。工具可以让Windows资源管理器支持显示更多格式的视频缩略图。第一次使用时，只需简单的点击一下 ‘激活 Icaros’。

wordpress插入bilibili视频并在首页形成缩略图

03-13

<think>好的，用户想在WordPress网站中嵌入Bilibili视频，并让视频在首页显示为缩略图。我需要分步骤解决这个问题。首先，嵌入Bilibili视频通常可以用iframe或者WordPress的嵌入功能。Bilibili提供了分享代码，可以直接复制嵌入代码到文章里。但用户可能不太清楚具体步骤，需要详细说明如何获取和插入代码。然后是生成首页缩略图的问题。WordPress默认会使用文章中的第一张图片作为缩略图，但Bilibili视频没有图片，所以需要手动设置。用户可能需要安装插件来自动获取视频缩略图，或者手动上传特色图像。另外，可能需要使用函数钩子来捕获视频中的封面图，并设置为文章的特色图片。还要考虑插件选择，比如使用IFrame插件来确保视频正确嵌入，或者用oEmbed插件简化嵌入过程。另外，缩略图生成可能需要用到GD库，但WordPress本身处理图像可能需要插件辅助，比如Featured Image Generator之类的插件，或者自定义代码从Bilibili的API获取封面。需要注意用户的技术水平，尽量推荐插件而不是手动编码，除非用户有开发能力。同时提醒用户注意视频加载可能影响网站速度，建议懒加载或缩略图优化。最后，检查步骤是否全面，是否需要分点说明，确保每个环节清晰，比如嵌入视频和生成缩略图分开讲解，可能还要测试代码是否正确，引用相关的资料或插件文档。</think>要在WordPress中嵌入Bilibili视频并生成首页缩略图，可以通过以下步骤实现： --- ### 一、嵌入Bilibili视频 1. **获取视频嵌入代码** 在Bilibili视频页面点击「分享」→「嵌入代码」，复制形如以下的代码： ```html <iframe src="//player.bilibili.com/player.html?bvid=BV1xx411c7BF&page=1"></iframe> ``` 2. **插入WordPress编辑器** - 在文章编辑界面切换为「HTML」模式 - 将复制的iframe代码粘贴到目标位置 - 建议安装「Advanced iFrame」插件优化显示效果[^1] --- ### 二、生成首页缩略图 #### 方案A：手动设置特色图像 1. 在Bilibili视频页面右键点击封面图「另存为」 2. 上传到媒体库并设置为「特色图像」 #### 方案B：自动抓取封面（需编码） ```php // 在主题的functions.php中添加 function set_bilibili_thumbnail($post_id) { $content = get_post_field('post_content', $post_id); preg_match('/bvid=([A-Za-z0-9]+)/', $content, $matches); if (!empty($matches[1])) { $cover_url = "https://api.bilibili.com/x/web-interface/view?bvid=".$matches[1]; $response = wp_remote_get($cover_url); $data = json_decode(wp_remote_retrieve_body($response)); if(isset($data->data->pic)) { media_sideload_image($data->data->pic, $post_id); } } } add_action('save_post', 'set_bilibili_thumbnail'); ``` --- ### 三、首页显示优化 1. 安装「Post Thumbnail Editor」插件调整缩略图裁剪比例 2. 在主题文件中确保调用： ```php <?php if (has_post_thumbnail()) : ?> <?php the_post_thumbnail('medium'); ?> <?php endif; ?> ``` ---

Bilibili，B站 视频缩略图 快速预览 的实现

Bilibili，B站视频缩略图快速预览的实现