1.探究

  • 在看b站视频,滑到进度条的时候突发奇想,想知道这个预览图是怎么做到的

  • 打开控制台,发现每次移动鼠标悬浮位置的时候都会发出一条网络请求,并且该请求的size显示来源于内存,当时以为每次加载视频的时候先提前把所有预览图都加载好了吗?但是刷新后去看发现只有当鼠标移动的时候才会请求该图片并且来源于内存,然后就开始找这个图片到底什么时候加载的

  • 找了一会,没找到,但是这个图片是某个js加进来的,点进去看js,通过js可以看出图片是canvas生成的



  • 通过查canvas的api发现,第一个参数x是一个图片,说明这个图片是来源于别的地方

  • 加上断点调试看

  • 发现在渲染图片之前有一条图片请求,里面是类似于雪碧图的一张图片,里面包含了很多张预览图

  • 通过不断移动,发现每一段时间间隔内就会有一个avif格式图片的请求,并且存在一定的规律

2. 总结

  • 实现原理为 将视频按某种规则按照时间段划分开,每一个时间段对应一张预览集合图,滑到某个时间段的时候,去请求图片,并且根据当前鼠标悬浮的位置根据某种规则,截取出来预览集合图中的某个小图,通过canvas绘制出来
  • 预览合集图的生成在服务器完成,也就是每个视频上传发布之后,服务器都会读取视频按照规则生成预览图

b站的视频进度条悬浮预览视频画面实现方式的更多相关文章

  1. ffmpeg实现视频文件合并/截取预览视频/抽取音频/crop(裁剪)(ffmpeg4.2.2)

    一,ffmpeg的安装 请参见: https://www.cnblogs.com/architectforest/p/12807683.html 说明:刘宏缔的架构森林是一个专注架构的博客,地址:ht ...

  2. 终极指南：如何为iOS8应用制作预览视频

    最近一两个月里,苹果的世界里出现了很多新东西,比如屏幕更大的iPhone 6,可穿戴设备Apple Watch,iOS8,以及旨在帮助用户更好的发现应用的App Store改版等等. 说到App St ...

  3. APP_Store - 怎样为iOS8应用制作预览视频

    关于iOS 8应用预览视频的话题,从设计.技术规范,到录屏.编辑工具,介绍的都比较详尽:建议收藏,在接下来用的到的时候作以参考.下面进入译文. 最近一两个月里,苹果的世界里出现了很多新东西,比如屏幕更 ...

  4. Opencv学习笔记——视频进度条的随动

    1. CvCapture结构体: CvCapture是一个结构体,用来保存图像捕获的信息,就像一种数据类型(如int,char等)只是存放的内容不一样,在OpenCv中,它最大的作用就是处理视频时(程 ...

  5. Opencv step by step - 视频进度条

    上一个博文只是进行了视频播放,这里加上进度条. 下面是修改好的代码: #include <cv.h> #include <highgui.h> /* * tan@ubuntu: ...

  6. Yii2 框架下bootstrap 弹窗预览视频等~

    Yii2 本身已经引用了'yii\bootstrap\BootstrapAsset',所以使用bootstrap 非常简洁. 1 在PHP页面引用命名空间 use app\assets\AppAsse ...

  7. FileReader与URL.createObjectURL实现图片、视频上传前预览

    之前做图片.视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览.实际上这只是文件“上传后再预览”,这既浪 ...

  8. 使用axios实现上传视频进度条

    这是最终的效果图 先介绍一下axios的使用:中文的axios官方介绍 首先定义一个uploadTest方法,写在vue文件的methods里 该方法有三个参数,分别是参数,和两个回调函数,参数就是我 ...

  9. IIS6/IIS7环境下实现支持mp4视频随意拖动、预览播放、边下载边播放

    前几天,一客户需要在IIS环境下实现MP4视频可以随意拖动观看,边下载边播放.一看这要求,IIS本身是无法实现,想着应该需要用插件,于是GG一番,还真找到这样的插件,此组件为H264-Streamin ...

  10. ueditor编辑器视频上传不能预览的问题

    ps:来源 https://blog.csdn.net/eadela/article/details/76264168 修改ueditor.all.js文件 ueditor.all.js,17769行 ...

随机推荐

  1. Spring与微服务

    Spring与微服务 微服务论文 Melvyn Conway 的意识是,像下图所展示的,设计一个系统时,将人员划分为 UI 团队,中间件团队,DBA 团队,那么相应地,软件系统也就会自然地被划分为 U ...

  2. day07-1MySQL约束

    MySQL约束 基本介绍 约束用于确保数据库的数据满足特定的商业规则 在mysql中,约束包括:not null,unique,primary key,foreign key 和check 5种 1. ...

  3. jquery之ajax中文乱码解决方案

    $.ajax({ dataType : 'json',type : 'POST',url : 'http://localhost/test/test.do',data : {id: 1, type: ...

  4. Elasticsearch - Docker安装Elasticsearch8.12.2

    前言 最近在学习 ES,所以需要在服务器上装一个单节点的 ES 服务器环境:centos 7.9 安装 下载镜像 目前最新版本是 8.12.2 docker pull docker.elastic.c ...

  5. Feign调用远程服务时传递Cookie信息

    @Configuration public class TtpfFeignConfig { @Bean public RequestInterceptor requestInterceptor(){/ ...

  6. YCProgress自定义百分比进度条

    目录介绍 1.本库优势亮点 2.使用介绍 2.1 圆环百分比进度条 2.2 直线百分比进度条 2.3 仿杀毒类型百分比进度条 3.注意要点 4.效果展示 5.其他介绍 1.本库优势亮点 圆环百分比进度 ...

  7. 在 PostgreSQL 中，解决图片二进制数据，由于bytea_output参数问题导致显示不正常的问题。

    在 PostgreSQL 中,bytea_output 参数控制在查询结果中 bytea 类型的显示格式.默认情况下,bytea_output 的值为 hex,这意味着在查询结果中,bytea 类型的 ...

  8. 【K8S】如何进入kubernetes的一个pod

    如何进入kubernetes的一个pod呢,其实和进入docker的一个容器相似: 进入docker容器 : docker exec -ti <your-container-name> / ...

  9. 京东一面挂在了CAS算法的三大问题上，痛定思痛不做同一个知识点的小丑

    写在开头 在介绍synchronized关键字时,我们提到了锁升级时所用到的CAS算法,那么今天我们就来好好学一学这个CAS算法. CAS算法对build哥来说,可谓是刻骨铭心,记得是研二去找实习的时 ...

  10. #Kruskal重构树，主席树，倍增#洛谷 4197 Peaks

    题目传送门 分析 首先第\(k\)大一般都是主席树 问题是困难值的限制有点束手无措 又是\(\text{Kruskal重构树}\) 将困难值为边权跑最小生成树,重新建树,实际上让困难值跳到尽量大的位置 ...