这篇文章主要介绍了HTML5视频循环播放多个视频的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

最近在开发中遇到的需求是：微信扫描课件二维码，播放其对应的课件视频

设计流程

1.扫描二维码时，将其视频列表存入模型中，存入第一条是为了，不在超文本标记语言界面重新获取第一条视频

model.addAttribute('playUrl '，videos.get(0).getvideoURl())；

model.addAttribute('videoUrls '，jsonutils。至JSON(视频))；

2.返回其对应的超文本标记语言界面

返回“客户端/课程播放器。html "；

3.使用录像播放视频第一条视频

视频id='videoID '控件='true '

style='object-fit:fill '

src='${playUrl} '

class=' '水平-img '

预加载='元数据'

webkit-playsinline='true '

playsinline='true '

x-webkit-airplay='allow '

X5-视频播放器-类型='h5 '唐山网站设计X5-视频播放器-全屏='真'

X5-视频方向='横向'

自动播放

抱歉，您的浏览器不支持内嵌视频！

/视频

4.用结束监控视频播放进度

脚本类型='application/javascript '

videoDom。addevent listener(' ended '，function(event) {

if (index===length-1) {

videoDom。pause()；

} else {

index=1；

videoDom.src=videos[index].视频Url

videoDom。play()；

}

})

/script

超文本标记语言界面如下：

！声明文档类型

html lang='en '

头

meta charset='UTF-8 '

元名称="视口"

内容='宽度=设备宽度，用户可缩放=否，初始比例=1.0,最大比例=1.0,最小比例=1.0 '

元http-equiv=' X-UA-兼容'内容='ie=edge '

标题$ { title }/标题

风格。视频{

位置：固定；

top : 0；

底部： 0；

右： 0；

左： 0；

z-index : 99

transition:全0.3s

背景-color: rgba(0，0，0，0.5)；

}。视频内容{

高度： 100%;

宽度： 100%;

}

视频{

位置：初始；

}

视频。地平线-img {

宽度： 100%;

高度：自动

最大高度： 100%;

}

/style

/head

身体

' div class='视频'

' div class='视频内容'

视频id='videoID '控件='true '

style='object-fit:fill '

src='${playUrl} '