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

[humbass]

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

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

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

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

[DOLLOR]

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

[lujiaxing]

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

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

[humbass]

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

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



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