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. Kubernetes-一文详解ServiceAccount与RBAC权限控制

    一.ServiceAccount 1.ServiceAccount 介绍 首先Kubernetes中账户区分为:User Accounts(用户账户) 和 Service Accounts(服务账户) ...

  2. pip 查看某个包有哪些版本并升级

    查看某个包有哪些版本 pip install xxx== 升级包 pip install xxx==1.1

  3. nest.sh 脚本 发布服务

    每次发布后端nest 直接执行一个脚本即可 给脚本赋值权限 chomd 777 nest.sh nest.sh 脚本 #!/bin/bash cd /root/gateway-study git pu ...

  4. day10-中文乱码处理

    中文乱码处理 1.问题抛出 当表单提交的数据为中文时,会出现乱码: (1)Monster.java: package com.li.web.datavalid.entity; import org.h ...

  5. [Leetcode 1981. 最小化目标值与所选元素的差] 记忆化搜索

    记忆化搜索 class Solution { int ans = 5001; public int minimizeTheDifference(int[][] mat, int target) { i ...

  6. 如何用数字人技术让课堂活起来？番职院和3DCAT实时云渲染给出答案

    2023年4月20日,广州市第二届智慧教育成果巡展活动在番禺职业技术学院(下文简称番职院)举行,本次活动的主题是''智能AI助教-让课堂活起来''. 活动现场,瑞云科技受邀展示了其自主研发的瑞云数字人 ...

  7. Puppet 2024年度报告：平台工程发掘 DevOps 无限潜质

    Puppet 于本周发布了一份2024年的 DevOps 现状报告 The State of DevOps Report: The Evolution of Platform Engineering. ...

  8. windows系统设置状态栏时间显示读秒

    windows系统设置状态栏时间显示读秒 要实现的效果如下图: 一.打开注册表 WIN+R输入[cmd]之后输入[regedit]回车 二.修改注册表 在注册表地址栏输入: HKEY_CURRENT_ ...

  9. jQuery AJAX 常见属性

    1 jQuery.ajax(...) 2 部分参数: 3 url:请求地址 4 type:请求方式,GET.POST(1.9.0之后用method) 5 headers:请求头 6 data:要发送的 ...

  10. Bochs调试指令

    Bochs   Bochs就像一台真机一样,处理器在加电之后,要开始取指令并执行指令. jmpf f000:e05b ;转移目标位置ROM-BIOS   如图在左侧显示了该指令所在的物理内存地址 0x ...