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 弹性布局快速入门
Jun 06 HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 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下实现折线图效果的代码
2007/04/28 PHP
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
PHP include_path设置技巧分享
2011/07/03 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
jquery offset函数应用实例
2012/11/14 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
numpy.where() 用法详解
2019/05/27 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
详解pandas映射与数据转换
2021/01/22 Python
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
三查三看党性分析材料
2014/02/18 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
Python Django获取URL中的数据详解
2021/11/01 Python
python可视化大屏库big_screen示例详解
2021/11/23 Python
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android