video.js 视频加载srt字幕播放，并循环区间复读

前端项目中，有个视频能播放srt字幕并能循环复读指定区间的功能要求，研究了下，思路如下：

1、web端关于视频 都用框架videojs 还挺方便，直接给video 标签初始化，设置宽、高、自动播放、缩略图等，并能监听播放，拖放

2、将srt 字幕文件 进行读取，并转为对象数组

srt格式为：

转化为对象数组：

[     {sn: "0", startTime: 089, endTime: 789, content: "For me traveling isn't about visiting the major areas, taking a photo and crossing it："},

     {sn: "1", startTime: 838, endTime: 1485, content: "It's about understanding and immersing yourself in a different culture"}

   ]

3、监听timeupdate 函数，将转为的字幕数组根据时间线 随时播放出来，将当前时间 playercurrentTime() 和字幕初始时间 和 结束时间进行比较

实现为：

4、复读功能 ，还是监听timeupdate 当播放时间超过后，重新设置播放时间为初始时间，实现反复播放

有需求，请互相讨论 Q 1873893691

设置方法如下：

1，在页面中找到“媒体”这一项，点击进入并找到“影片”再点击进入，从照片库中寻找到自己想要添加的影片（也可以直接从桌面将自己需要添加的影片拖放进Pages中），点击添加进Pages中。

2，在影片的样式编辑页面中，选中一个影片模板并点击试用。

3，从边框容器中选择一个自己喜欢的相框添加进入Pages中给影片加上。

4，还可以选择“倒影”，将这一项前方的小勾勾选上，影片就会出现一片倒影。还能够根据实际需求具体再调整。

5，找到页面右上方的“影片”点击进入，并在新页面中找打“重复”这一项，点击选择“循环”即可完成视频循环播放的 *** 作！

---