HTML5+JS連續(xù)播放分段視頻有沒(méi)有什么解決方案

精華

糯康 2016-10-17 01:56:56 瀏覽(8710) 回復(fù)(7) 贊(0)

視頻格式MP4或FLV大約3段，每段15分鐘左右。需求： 1. 顯示出來(lái)的是總時(shí)間（45分鐘左右） 2. 能夠拖動(dòng)滾動(dòng)條（自動(dòng)切到合適的視頻段）煩請(qǐng)各位給一個(gè)思路

標(biāo)簽： javascript html html5

回答(7)

陳 2016-10-17

給每一段視頻一個(gè)不顯示的標(biāo)簽，其 preload 屬性設(shè)置為 metadata。這樣的話不會(huì)加載整個(gè)視頻但是你能獲得每個(gè)視頻的長(zhǎng)度。

這樣的話通過(guò)監(jiān)聽(tīng)那幾個(gè)標(biāo)簽的 durationchange 事件，你就知道總時(shí)間了。

然后無(wú)非就是做一個(gè)可以拖動(dòng)的滾動(dòng)條；拖動(dòng)到某個(gè)部位之后，算一下處于那段視頻中間；把那段視頻對(duì)應(yīng)的顯示出來(lái)，并把 currentTime 設(shè)置到相應(yīng)的時(shí)間，然后 play()。

播放時(shí)通過(guò)監(jiān)聽(tīng) timeupdate 事件來(lái)更新進(jìn)度條的位置。通過(guò)監(jiān)聽(tīng) ended 事件來(lái)獲知一段視頻已經(jīng)播放結(jié)束，應(yīng)該加載下一段。