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

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

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

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

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

@forty

并不是要盯着字幕看！

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

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