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

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

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

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

截图如下:

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

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

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

<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; ?> ``` ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值