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. [模板]01trie，维护异或最大值

    // 查询异或最大值,每次插入和查询时间都是log(C) template<class T> class trie01 { vector<vector<T>> tr ...

  2. HiSi 3516CV500 NNIE(Neural Network Inference Engine) 摸鱼记录(3) ---真机调试（实例分析）

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  3. 【VR虚拟现实】-医疗行业的具体应用

    虚拟现实 (VR) 虽然经常与游戏联系在一起,但不可否认,未来科技少不了虚拟现实,其应用可以彻底改变许多行业.在医疗领域,无数人正在探索 VR 可以帮助患者和医疗从业者实现更好的治疗结果治疗方式,比如 ...

  4. 记录-JS简单实现购物车图片局部放大预览效果

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.实现效果 二.代码实现 代码不多,先看一下 HTML 里面结构很简单,初始化 MagnifyingGlass 对象来关联一个 IMG  ...

  5. RL 基础 | Policy Gradient 的推导

    去听了 hzxu 老师的 DRL 课,感觉终于听懂了,记录一下- 目录 0 我们想做什么 1 三个数学 trick 2 对单个 transition 的 policy gradient 3 对整个 t ...

  6. .NET开源、免费、强大的交互式绘图库

    前言 今天大姚给大家分享一款.NET开源(采用MIT许可证).免费.强大的交互式绘图库,该库能够轻松地实现大型数据集的交互式显示.使用几行代码即可快速创建折线图.柱状图.饼图.散点图等不同类型的图表: ...

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

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

  8. Spring Cloud服务之Nacos作为注册中心与配置中心

    1.创建maven父工程管理jar包版本 创建maven骨架,删除多余部分文件.只留pom文件,添加依赖 <packaging>pom</packaging> <pare ...

  9. RelationNet++：基于Transformer融合多种检测目标的表示方式 | NeurIPS 2020

    论文提出了基于注意力的BVR模块,能够融合预测框.中心点和角点三种目标表示方式,并且能够无缝地嵌入到各种目标检测算法中,带来不错的收益   来源:晓飞的算法工程笔记 公众号 论文: RelationN ...

  10. YOLACT++ : 实时实例分割，从29.8mAP/33.5fps到34.1mAP/33.5fps

    YOLACT是首个实时实例分割算法,但是准确率较SOTA差得有点多,YOLACT++从主干网络.分支和anchor的3个角度出发对YOLACT进行优化,在保持实时性的前提下提升了5map,论文改进的角 ...