HTML5video循环播放多个视频的方法步骤
小红书种草一手资源覆盖200+行业
这篇文章主要介绍了HTML5 video循环播放多个视频的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
最近在开发中遇到的需求是：微信扫描课件二维码，播放其对应的课件视频
设计流程
1.扫描二维码时，将其视频列表存入model中，存入第一条是为了，不在html界面重新获取第一条视频
model.addAttribute("playUrl", videos.get(0).getVideoUrl()); model.addAttribute("videoUrls", JsonUtils.toJson(videos));
2.返回其对应的html界面
return "client/coursePlayer.html";
3.使用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="h5" x5-video-player-fullscreen="true" x5-video-orientation="landscape" autoplay> 抱歉，您的浏览器不支持内嵌视频! </video>
4.用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="h5" 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循环播放多个视频的方法步骤的文章就介绍到这了,更多相关HTML5 video循环播放多视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
来源：脚本之家
链接：https://www.jb51.net/html5/739319.html
尊敬的看官您对HTML5video循环播放多个视频的方法步骤有什么看法呢？互联网品牌制作专家愿与您共同探讨！版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请加微信号oem365 举报，一经查实，本站将立刻删除。上一篇: 2021淘宝新势力周春有价格保护吗？附常见问答 返 回 下一篇:解决html5中的video标签ios系统中无法播放使用的问题
