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. 5-事件组&任务通知

    获取某个事件 获取若干事件中的某个事件 获取若干事件中的全部事件 !!!!不可获得若干事件中的几个事件 创建事件组,设置事件,等待事件 static EventGroupHandle_t xEvent ...

  2. 摆脱鼠标系列 vscode 向右拆分编辑器 ctrl + 右箭头

    摆脱鼠标系列 vscode 向右拆分编辑器 ctrl + 右箭头 为什么 今天看见一个两栏工作的,左侧放的是目录大纲,右侧是代码内容 用快捷键 ctrl + 右箭头 快速扩展一个,关闭可以ctrl + ...

  3. 感慨 vscode 支持win7最后一个版本 1.70.3 于2022年7月发布

    为什么 家里电脑一直是win7,也懒的升级,nodejs也不能用最新的,没想到vscode也停产了 https://code.visualstudio.com/updates/v1_70 后记 别用u ...

  4. StatefulSet是怎样实现的

    StatefulSet是Kubernetes中用于管理有状态应用的标准实现.与Deployment不同,StatefulSet为每个Pod提供了一个唯一的.稳定的网络标识符,并且Pod的启动和停止顺序 ...

  5. python中往json中添加文件的方法

    一 前言: python中常用的一种方式,这里给大家列出来一下. 二 实例 比如,最简单的一个json文件 test_json = { "a": 1, "b": ...

  6. SQL注入的原理与分析

    SQL注入的原理与分析 1.SQL注入的本质 2.部分SQL语句 3.SQL注入流程 一.SQL注入的本质 SQL注入的本质,就是把用户输入的数据当作代码执行 Web应用程序对用户输入的数据校验处理不 ...

  7. 云VR：虚拟现实专业化的下一步

    传统的VR通常需要功能强大的计算机和其他高性能设备来提供良好的用户体验.但是,如果有一种方法可以从任何设备和任何地方处理VR内容呢?这就是云VR对VR用户的承诺.随着5G和其他网络的到来,VR技术的未 ...

  8. Android线程池封装库

    目录介绍 1.遇到的问题和需求 1.1 遇到的问题有哪些 1.2 遇到的需求 1.3 多线程通过实现Runnable弊端 1.4 为什么要用线程池 2.封装库具有的功能 2.1 常用的功能 3.封装库 ...

  9. 记录--Vue使用CDN引入，响应式失效？

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 背景 最近心血来潮,想要在本地开发时,也用CDN的方式引入 Vue,想着既然通过CDN引入了,那么在项目中就没必要再 import Vue ...

  10. Elasticsearch索引不存在时，查询接口报错怎么办？

    1.索引不存在,报错:type=index_not_found_exception, reason=no such index解决办法: DSL: GET /text_index_003/_searc ...