html5 视频播放器，带有播放列表的怎么做？

html-css034

html5 视频播放器，带有播放列表的怎么做？,第1张

需要用js去控制

先把列表用html生成出来，再用脚本去控制点击列表的时候播放

可以参考

http://www.feelcss.com/html5-music-player-playlist-and-playback.html

new个video，指定播放列表的第一个视频路径为src。监听end事件，回调里面把video的src改成列表的下一个，再play

代码示例：

var vList = ['视频地址url1', 'url2', '...'] // 初始化播放列表

var vLen = vList.length // 播放列表的长度

var curr = 0 // 当前播放的视频

var video = new Video()

video.addEventListener('end', play)

play()

function play(e) {

   video.src = vList[curr]

   video.load() // 如果短的话，可以加载完成之后再播放，监听 canplaythrough 事件即可

   video.play()

   curr++

   if (curr >= vLen) curr = 0 // 播放完了，重新播放

   }

可以实现html5 播放多个视频。一个接一个的播放