web视频和字幕同步的实现
最近做项目遇到奇葩的需求,即:一个播放视频的页面,用户播放视频的同时,页面上要将字幕显示出来,字幕并随着视频播放的进度而滚动,效果图如下:
ps:以上是效果图。
经过一天多的努力,事情终于有了头绪,并将此经历记录下来,后续有需要的童鞋可以参考下,当然,我美感不足,做的只是一个雏形,童鞋们可以拓展,主要是思路,有了思路,就有了代码~呵呵!考虑到项目里面有jar包,所以只能点击此处(源码,供有兴趣的童鞋下载)下载了。。。
须知:项目使用的是jsp+servlet,视频播放插件是jwplayer,外加jQuery。jar包和视频,字幕资源在项目中有
实现的思路是:
1 首先得熟悉字幕的格式
我用到的字幕文件后缀为srt,其格式为:
序号
开始时间 -->结束时间
字幕内容
实例如下:
1
00:00:02,259 --> 00:00:07,404
明明就
2
00:00:08,852 --> 00:00:10,828
作词:方文山 作曲:周杰伦
3
00:00:11,924 --> 00:00:17,428
演唱:周杰伦
4
00:00:30,052 --> 00:00:37,452
糖果罐里好多颜色 微笑却不甜了
5
00:00:38,472 --> 00:00:44,868
你的某些快乐 在没有我的时刻
2 创建实体类 实体类具有 开始时间 结束时间 字幕主体 这三个字段,
好了,废话不多说了,直接亮代码!!!
package myPlayer;
/**
*
* @au