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. vscode 文件上传快捷键 shift+alt+s （ftp专用）插件用的 ftp-sync

    vscode 文件上传快捷键 shift+alt+s (ftp专用)插件用的 ftp-sync { "key": "shift+alt+s", "co ...

  2. get 加 header 下载文件 函数，虽然最后没用。

    export const apiDown = (url, data = {}) => { let data2 = secretFilter(data) axiosDown({ url, para ...

  3. iView 表单验证 如果prop字段和表单里的字段对不上，会触发校验，提示错误信息

    iView 表单验证 如果prop字段和表单里的字段对不上,会触发校验,提示错误信息 原因: 在某些情况,没有id,只有文本的时候,需要返显文本,直接用input显示文本,就会出现,触发数据校验的问题 ...

  4. 从零开始写 Docker(六)---实现 mydocker run -v 支持数据卷挂载

    本文为从零开始写 Docker 系列第六篇,实现类似 docker -v 的功能,通过挂载数据卷将容器中部分数据持久化到宿主机. 完整代码见:https://github.com/lixd/mydoc ...

  5. AWS ES ISM学习应用笔记

    Elastic Search 6以上版本推出 ILM,用于管理Index的生命周期,但AWS上的ES是基于OSS版本的ES,所以自己开发了ISM来代替ILM.项目是从logstash往ES写入数据,但 ...

  6. Python实现SQL注入脚本

    实验环境 攻击主机IP:172.18.53.145 目标主机IP:172.18.53.11 此处的靶场是Vulnhub中的WEB MACHINE: (N7) 靶场测试 访问靶场的登录页面,使用sqlm ...

  7. RSA算法揭秘：加密世界的守护者

    RSA算法起源: RSA算法是由Ron Rivest.Adi Shamir和Leonard Adleman在1977年共同提出的.它是一种非对称加密算法,基于两个大素数的乘积难以分解的数论问题.RSA ...

  8. C# PaddleOCR 车牌识别

    效果 车牌识别测试地址 http://47.108.88.211/manual/VehPlateTest.html 通用OCR识别测试地址 http://47.108.88.211/manual/OC ...

  9. Oracle 获取月初、月末时间，获取上一月月初、月末时间

    select trunc(sysdate, 'mm'), last_day(trunc(sysdate)), trunc(add_months(trunc(sysdate), -1), 'mm'), ...

  10. KafkaConsumerDemo

    pom <dependency> <groupId>org.springframework.kafka</groupId> <artifactId>sp ...