美文网首页程序员
video.js 视频加载srt字幕播放,并循环区间复读

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

作者: 正雄的力量 | 来源:发表于2021-01-01 14:28 被阅读0次

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

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

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

    srt格式为:

    转化为对象数组:

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

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

       ]

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

    实现为:

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

    有需求,请互相讨论 Q 1873893691

    相关文章

      网友评论

        本文标题:video.js 视频加载srt字幕播放,并循环区间复读

        本文链接:https://www.haomeiwen.com/subject/sttroktx.html