HTML5 video循环播放多个视频-蒲公英云

HTML5 video循环播放多个视频

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

设计流程

扫描二维码时，将其视频列表存入model中，存入第一条是为了，不在html界面重新获取第一条视频

model.addAttribute(“playUrl”, videos.get(0).getVideoUrl());
```
 model.addAttribute("videoUrls", JsonUtils.toJson(videos));
```
返回其对应的html界面

return “client/coursePlayer.html”;
使用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>