V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
hi543
V2EX  ›  程序员

B 站视频预览是如何实现的?

  •  
  •   hi543 · 2020-10-22 18:38:00 +08:00 · 3352 次点击
    这是一个创建于 1252 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在 B 站搜索视频时,鼠标移动到视频封面上,会下载一张 WEBP 格式的图片,该图片由多个视频截图合并而成。当鼠标炫富在视频封面上时,会出现一个进度条,左右滑动鼠标时进度条会减少或者增加,继而出现对应的视频截图。

    操作步骤

    1. 点我打开视频搜索页面

    2. 点我打开 WEBP 图片

    3. 操作预览图 操作预览图.gif


    我的问题是

    1. B 站是如何将一张图片切割成视频的预览截图?类似 CSS 的图片定位吗?

    2. 我个人尝试过浏览器的开发者工具抓包和断点,暂未找到关键点代码,如何定位到实现问题 1 的关键代码?下面是我尝试定位代码的截图 image.png

    17 条回复    2020-10-23 17:56:51 +08:00
    luckyrayyy
        1
    luckyrayyy  
       2020-10-22 18:40:25 +08:00
    不知道 b 站怎么处理的,要是我的话可能视频上传的时候就抽好关键帧保存着,鼠标移上去的时候请求该视频的关键帧就行了。
    misdake
        2
    misdake  
       2020-10-22 18:43:39 +08:00   ❤️ 1
    某一个视频的图片: https://i0.hdslb.com/bfs/videoshot/[email protected]
    图片里有很多子图片
    把这个图片作为鼠标进入时,上面一个层的 background 。上面这个层上放一个 mousemove 事件,根据鼠标位置,修改 background-position,设置显示哪一张子图片。
    fool079
        3
    fool079  
       2020-10-22 18:43:54 +08:00   ❤️ 1
    看 dom 就知道了,雪碧图
    misdake
        4
    misdake  
       2020-10-22 18:45:22 +08:00   ❤️ 1
    图片生成就和上传时候提示你选择封面那个图一样,在上传之后就会截取一些关键帧,拼成这么一张图保存起来。
    shakeyo
        5
    shakeyo  
       2020-10-22 18:45:33 +08:00   ❤️ 1
    这肯定是后端生成好了前端直接播放序列帧的
    z5864703
        6
    z5864703  
       2020-10-22 18:46:35 +08:00   ❤️ 1
    利用 css 做的,通过 background-position 来定位图片位置
    z5864703
        7
    z5864703  
       2020-10-22 18:47:13 +08:00
    图片则是取对应位置关键帧,提前生成好的
    gggxxxx
        8
    gggxxxx  
       2020-10-22 19:12:20 +08:00 via iPhone
    搭车问问。p 站的预览怎么实现的?
    和 b 站不同得是,p 站的预览可播放,而且是集锦的感觉。是 GIF ?感觉精度超出了 GIF 的极限。还是说直接就是一个小的 mp4 ?
    marquina
        9
    marquina  
       2020-10-22 19:17:43 +08:00 via Android
    @gggxxxx 我记得是 webm
    ungrown
        10
    ungrown  
       2020-10-22 19:17:49 +08:00
    @gggxxxx #8 以前旧版的是 gif 动图,现在的本质上就是个小视频
    gggxxxx
        11
    gggxxxx  
       2020-10-22 19:19:40 +08:00 via iPhone
    @ungrown 感谢,解惑了
    GeekSky
        12
    GeekSky  
       2020-10-22 19:36:21 +08:00
    啥时候油管的视频预览能改进一下,现在还不如 P 站的好。
    287854442
        13
    287854442  
       2020-10-22 20:31:58 +08:00
    CDN 能对视频抽关键帧,抽完合并成一张精灵图,web 端解析就行了
    HenryWang0723
        14
    HenryWang0723  
       2020-10-23 10:15:54 +08:00
    @gggxxxx 兄弟牛 P,我昨天冲浪的时候发现 91 也是这种预览,但是是截取多段组合的
    Huelse
        15
    Huelse  
       2020-10-23 13:03:24 +08:00
    @gggxxxx #8 b 站的动态里视频也能拖动预览,跟着鼠标动的那种
    gggxxxx
        16
    gggxxxx  
       2020-10-23 13:09:45 +08:00 via iPhone
    @Huelse p 站的预览画面是连续的且自动播放,跟足球比赛赛后集锦一样,看过就懂。。。。
    jifengg
        17
    jifengg  
       2020-10-23 17:56:51 +08:00
    这个图片还有一个对应的 json 文件,按图片名搜索看看,看了 json 内容,怎么实现的也就大概清楚了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4301 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 10:12 · PVG 18:12 · LAX 03:12 · JFK 06:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.