Question

html5 video标签 如何多个视频连续播放

最好有进度条 各种功能齐全的！
要完整的代码！

Answer 1

这需要用js来写了，需要动态创建video，例如

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; // 播放完了，重新播放
}

追问

我找到这段代码了 new video根本不行。。这个应该不是完整代码

追答

试试这一段：

var vid = document.createElement("video");
vid.controls="controls";
vid.width = width;
vid.height=height;
vid.id = "video_control";
vid.muted= false;

document.getElementById("show").appendChild(vid);
其中show是一个div

追问

这只是创建个video好么？ 这个和多个连续播放有啥关系？

追答

这个是创建一个video啊，前面那段代码不是有连续播放了吗？
网上找代码不就是找到哪段有用就用哪段嘛
拼起来试试看啊
比如
var vid = document.createElement("video");
vid.controls="controls";
vid.width = width;
vid.height=height;
vid.id = "video_control";
vid.muted= false;

document.getElementById("show").appendChild(vid);
vid.addEventListener('end', play);
play();
function play(e) {
vid.src = vList[curr];
vid.load(); // 如果短的话，可以加载完成之后再播放，监听 canplaythrough 事件即可
vid.play();
curr++;
if (curr >= vLen) curr = 0; // 播放完了，重新播放
}

追问

以后给代码的时候请你自己试试好么？
vid.addEventListener('end', play); 应该是ended
video.addEventListener('ended', play);

你也算对我有点帮助 采纳了