新手问题 谁能告诉我这种功能是如何实现的?(小白问题啦)

xiaolai · 2012年11月02日 · 最后由 xiaolai 回复于 2012年11月08日 · 3580 次阅读

最近看 TED 的时候,它的播放器是与演讲脚本关联的,就是说,点某句话,播放器就跳转到那个位置开始(好像也能指定时间点)。英语教学很需要这个东西啦。

thePlant 的 @sunfmin 做过, 每个词还能链接到词典解释的...

这个只是用到了 video 的 seek 功能,也就是指定从第几秒开始。主要看你用什么播放器,一般都是有这种接口的。所谓某句话,其实也就是跟时间做关联。

从英语教学的角度来说,我觉得 @xiaolai 可以跟 @ashchan 聊聊这方面的实现,他们的 iDaily 其实这些做的很强大。

html5 的话是用音频或者视频的 video_or_audio.currentTime = x 跳转到第 x 秒的

但是字幕和时间数据如何对应是个问题, 如果一个 video 已经有字幕文件, 可以解析字幕文件把时间轴弄出来, 否则就要用类似卡拉 OK 的制作工具来录入时间轴了.

@hlxwell 做过 web 版时间轴的录入工具哦. 做法就是把音频慢放 (这也是有一个工具可以转换的), 一个人每听一句话就按一下空格键把时间对上, 一般还要设一个反映延迟来修正录入后的时间数据.

好像 swfobject.js 有这个功能

#2 楼 @yedingding @xiaolai : 原理很简单的。首先需要有时间轴(字幕文件),一般格式的时间轴文件每一行指定了开始时间和 caption ,如:

[10:05:30.123] 现在我要发言了

用户点到某一句时,取到该句的开始时间,转换成播放器能识别的数字调用播放器的 seek 或类似方法。

同时一般同步都是双向的,即顺序播放时,会自动显示字幕。大部分播放器会提供当前播放时间的通知事件,或者如果要主动来做这件事,就设一个 timer 定时(如每 0.1 秒)去取当前播放到的时间再匹配时间轴文件,并显示相应的字幕。

由于播放器可以变速播放,上述逻辑中还要稍微处理一下。不过一般的 API 都提供相应的方法。

用开源的 flowplayer 提供的 cuepoints 功能可以实现你所能想到的任何需求:

http://flowplayer.org/docs/cuepoints.html

谢谢大家啦!

@luikore 这个工具可好了。多谢当年吕哥贡献超级正则 parser 哈哈。

#8 楼 @hlxwell 那这个工具在哪儿啊?呵呵,求指导。

#10 楼 @hlxwell :)那也谢谢!

需要 登录 后方可回复, 如果你还没有账号请 注册新账号