RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:9:30-18:00
扫码咨询
关闭右侧工具栏
HTML5视频循环播放多个视频的方法步骤
  • 作者:admin
  • 发表时间:2021-02-25 07:51
  • 来源:未知

这篇文章主要介绍了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} '