这篇文章主要介绍HTML5中video如何循环播放多个视频，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！设计流程扫描二维码时，将其视频列表存入model中，存入第一条是为了，不在html界面重新获取第一条视频&nbs
这篇文章主要介绍HTML5中video如何循环播放多个视频，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
设计流程
扫描二维码时，将其视频列表存入model中，存入第一条是为了，不在html界面重新获取第一条视频
model.addAttribute("playUrl", videos.get(0).getVideoUrl()); model.addAttribute("videoUrls", JSONUtils.tojson(videos));返回其对应的html界面
return "client/coursePlayer.html";使用video 播放视频第一条视频
<video id="videoID" controls="true" style="object-fit:fill" src="${playUrl}" class="horizontal-img" preload="metadata" WEBkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h6" x5-video-player-fullscreen="true" x5-video-orientation="landscape" autoplay> 抱歉，您的浏览器不支持内嵌视频! </video>用ended 监控视频播放进度
<script type="application/javascript"> videoDom.addEventListener('ended', function(event) { if (index === length-1) { videoDom.pause(); } else { index += 1; videoDom.src = videos[index].videoUrl; videoDom.play(); } }) </script>html界面如下：
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-Scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta Http-equiv="X-UA-Compatible" content="ie=edge"> <title>${title}</title> <style> .video { position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 99; transition: all 0.3s; background-color: rgba(0, 0, 0, 0.5); } .video-content { height: 100%; width: 100%; } video { position: initial; } video.horizontal-img { width: 100%; height: auto; max-height: 100%; } </style></head><body><div class="video"> <div class="video-content"> <video id="videoID" controls="true" style="object-fit:fill" src="${playUrl}" class="horizontal-img" preload="metadata" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h6" x5-video-player-fullscreen="true" x5-video-orientation="landscape" autoplay> 抱歉，您的浏览器不支持内嵌视频! </video> </div></div><script type="application/javascript"> var dom = document; var index = 0; var videos = ${videoUrls}; var videoDom = dom.getElementById('videoID'); videoDom.play(); videoDom.addEventListener('ended', function(event) { if (index === length-1) { videoDom.pause(); } else { index += 1; videoDom.src = videos[index].videoUrl; videoDom.play(); } })</script></body></html>以上是“HTML5中video如何循环播放多个视频”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网精选频道！
--结束END--
本文标题: HTML5中video如何循环播放多个视频
本文链接: https://www.lsjlt.com/news/255660.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0