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

[humbass]

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

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

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

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

已经写好了，欢迎使用、反馈！

https://chromewebstore.google.com/detail/simple-youtube-subtitle/kmdnhgnkhmhikcdogkbglpefnlbjahad


预览图：

https://lh3.googleusercontent.com/rFZYhn-DVh8iDKBfJ0wuZmvbqjmVK0Pm-npgGfuuQMxqMRmD1RSqMRin0NbEViJ0GRBoA4D0GDszq1_gw8hEqqKxEA=s640-w640-h400

[DOLLOR]

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

[lujiaxing]

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

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

[humbass]

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

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



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

[forty]

我怀疑你说的是字幕还是弹幕。。。字幕为什么要滚动？不是直接一句一句的切换吗，滚动起来很难阅读

[humbass]

@forty

并不是要盯着字幕看！

我的方式就是直接听，当听到某些发音、单词、表达有一些疑惑的时候，当意识到的时候往往已经到了下一句，这个时候瞄一眼字幕，看看是啥，视频还是按进度走，这就是右侧字幕存在的意义。

也是因为这样的需求，很多直接显示在视频画面内的字幕还是延时出现的，延时那么一两句。

[forty]

@humbass 那是延时吗，那叫音画不同步(笑哭)，一般是故障造成的.

[humbass]

@forty 非也，就是故意让字幕慢于视频几秒，字幕是谷歌官方的，不存在不同步的问题

[forty]

@humbass 一句话也就 2 秒左右，你还慢几秒，就是典型的不同步了。

[humbass]

@forty 都说了，有的字幕就是故意慢几秒，看字幕不是非要同步，英语的能力介于掌握和未掌握之间的，经常是听到一句话，没反应过来，反应过来已经是上一句，或者上上句了，所以就要滞后的字幕。