视频和字幕同步的实现(java版)

本文介绍了如何在Java项目中实现web视频和字幕的同步。使用jsp、servlet、jwplayer和jQuery,通过解析srt字幕文件,根据视频播放进度动态显示字幕内容,提供了一个基础的实现思路和关键代码片段。
摘要由CSDN通过智能技术生成

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
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值