这篇文章主要介绍了HTML5视频循环播放多个视频的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
最近在开发中遇到的需求是：微信扫描课件二维码，播放其对应的课件视频
设计流程
1.扫描二维码时，将其视频列表存入模型中，存入第一条是为了，不在超文本标记语言界面重新获取第一条视频
model.addAttribute(‘playUrl ‘，videos.get(0).获取视频网址())；
model.addAttribute(‘videoUrls ‘，jsonutils。tojson(视频))；
2.返回其对应的超文本标记语言界面
返回“客户/球场玩家。html “；
3.使用录像播放视频第一条视频
视频id=’视频id ‘控件=’真’
style=’object-fit:fill ‘
src=’${playUrl} ‘
class=’horizontal-img ‘
preload=’metadata ‘
webkit-playsinline=’true ‘
playsinline=’true ‘
x-webkit-airplay=’允许’
X5-视频播放器-类型=’h5 ‘
X5-视频播放器-全屏=’真’
X5-视频方向=’横向’
自动播放
抱歉，您的浏览器不支持内嵌视频！
/视频
4.用结束监控视频播放进度
脚本类型=’应用程序/javascript ‘
视频世界。addevent侦听器(‘ ended ‘，function(event) {
if (index===length-1) {
视频世界。pause()；
}否则{
指数=1;
videoDom.src=videos[index].视频Url
视频世界。play()；
}
})
/脚本
超文本标记语言界面如下：
！声明文档类型
html lang=’en ‘
头
meta charset=’UTF-8 ‘
meta name=’viewport ‘
内容=’宽度=设备宽度，用户可扩展=否，初始规模=1.0,最大规模=1.0,最小规模=1.0 ‘
meta http-equiv=’ X-UA-Compatible ‘ content=’ ie=edge ‘
title${title}/title
风格。视频{
位置：固定；
top:0；
底部：0;
右：0;
左：0;
z指数：99;
过渡：全0.3秒
背景色：rgba(0，0，0，0.5)；
}。视频内容{
身高：100%;
宽度：100%;
}
视频{
位置：初始；
}
视频。水平-图像{
宽度：100%;
高度：自动；
最大高度：100%;
}
/风格
/头
身体
div class=’视频’
div class=’视频内容’
视频id=’视频id ‘控件=’真’
style=’object-fit:fill ‘
src=’${playUrl} ‘
class=’horizontal-img ‘
preload=’metadata ‘
webkit-playsinline=’true ‘
playsinline=’true ‘
x-webkit-airplay=’允许’
X5-视频播放器-类型=’h5 ‘
X5-视频播放器-全屏=’真’
X5-视频方向=’横向’
自动播放
抱歉，您的浏览器不支持内嵌视频！
/视频
/div
/div
脚本类型=’应用程序/javascript ‘
var dom=文档
定义变量指数=0;
var videos=$ { video URL }；
var videoDom=DOM。getelementbyid(“视频id”)；
视频世界。play()；
视频世界。addevent侦听器(‘ ended ‘，function(event) {
if (index===length-1) {
视频世界。pause()；
}否则{
指数=1;
videoDom.src=videos[index].视频Url
视频世界。play()；
}
})
/脚本
/body
/html
到此这篇关于HTML5视频循环播放多个视频的方法步骤的文章就介绍到这了，更多相关HTML5视频循环播放多视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
来源：脚本之家
链接：https://www。jb51。net/html 5/739319。超文本标记语言
