前端項(xiàng)目中，有個(gè)視頻能播放srt字幕并能循環(huán)復(fù)讀指定區(qū)間的功能要求，研究了下，思路如下：

1、web端關(guān)于視頻 都用框架video.js 還挺方便，直接給video 標(biāo)簽初始化，設(shè)置寬、高、自動(dòng)播放、縮略圖等，并能監(jiān)聽(tīng)播放，拖放....

2、將srt 字幕文件 進(jìn)行讀取，并轉(zhuǎn)為對(duì)象數(shù)組

srt格式為：

轉(zhuǎn)化為對(duì)象數(shù)組：

[? ? ?{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、監(jiān)聽(tīng)timeupdate 函數(shù)，將轉(zhuǎn)為的字幕數(shù)組根據(jù)時(shí)間線 隨時(shí)播放出來(lái)，將當(dāng)前時(shí)間 player.currentTime() 和字幕初始時(shí)間 和 結(jié)束時(shí)間進(jìn)行比較

實(shí)現(xiàn)為：

4、復(fù)讀功能 ，還是監(jiān)聽(tīng)timeupdate 當(dāng)播放時(shí)間超過(guò)后，重新設(shè)置播放時(shí)間為初始時(shí)間，實(shí)現(xiàn)反復(fù)播放

有需求，請(qǐng)互相討論 Q 1873893691