HTML5 video循环播放多个视频的方法步骤


Posted in HTML / CSS onAugust 06, 2020

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

设计流程

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

HTML / CSS 相关文章推荐
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 #HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 #HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 #HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 #HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 #HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 #HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 #HTML / CSS
You might like
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
关于query Javascript CSS Selector engine
2013/04/12 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
JavaScript 拖拽实例代码
2016/09/21 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
vuex 使用文档小结篇
2018/01/11 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
简单介绍Python中的len()函数的使用
2015/04/07 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
名企HR怎样看待求职信
2014/02/23 职场文书
动物科学专业求职信
2014/07/27 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python