字幕滚动有没有更好的方式实现

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

重复造轮子，网上找了一些字幕工具，没有趁手的感觉，比较喜欢官方原来在右侧的展示形式，根据记忆，重新粗糙的复刻了下，https://i.imgur.com/i9dApFu.png

但是目前的实现方式是根据 video 播放的进度，找到对应的词条的 dom 高度，向上调整若干 offsetTop ，挺原始的方式

油管字幕内容是一个类似 xml 格式的文件，从内容上看，应该是把 script 直接丢到页面（或者某个容器）里头，没想明白这种方式是如何实现的。文件大概长这样

https://i.imgur.com/ICMeUIY.png

3 条回复 • 2024-11-09 21:51:29 +08:00

DOLLOR

12 天前

不用自己算 offsetTop ，scrollIntoView 就可以滚动到元素

lujiaxing

12 天前

额, 哥, 可以不用这么麻烦的. 你可以看下各种字幕文件的做法.
你做字幕的时候就可以完全按照时间来, hook video 的 ontimeupdate 事件.
然后至于字幕要显示到什么地方, 这更简单. 右侧不是你的字幕区么, 总高度你算得出来吧, 每一行字幕的高度是固定的吧? 一除就知道能显示多少行字幕吧?

那不就简单了, 把字幕依次排列进字幕列表里, 前面填充刚好满屏数量的空字幕. ontimeupdate 里得到当前帧对应的字幕, 然后 ``全部字幕 DOM 节点[字幕 Index - (显示多少行字幕 / 2)].scrollIntoView()`` 然后正中间正好就是你要显示的字幕. 你要加粗啊还是变色啊随你.

humbass

12 天前

@lujiaxing 明显，字幕高度不是固定，大部分是一行，有的时候是 2-4 行，不能简单的 scroll by index.

滚动的问题也已经实现了，只是不够好，看这个

youtube 返回的字幕内容是自带 script 标签的，我是猜测原来谷歌实现这个字幕的时候，应该是实现了一个容器，这个丢进去，自动就实现了滚动。