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 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 HTML / CSS
css3应用示例:新增的选择器
Mar 16 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
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
JavaScript this 深入理解
2009/07/30 Javascript
js select常用操作控制代码
2010/03/16 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
python动态加载变量示例分享
2014/02/17 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
简单了解什么是神经网络
2017/12/23 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
python 画函数曲线示例
2019/12/04 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
Python如何读写CSV文件
2020/08/13 Python
如何写一份好的英文求职信
2014/03/19 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
python编写函数注意事项总结
2021/03/29 Python
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
js判断两个数组相等的5种方法
2022/05/06 Javascript
Spring中bean集合注入的方法详解
2022/07/07 Java/Android