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循环播放多视频内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！