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 07 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
HTML中link标签属性的具体用法
May 07 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 在线翻译函数代码
2009/05/07 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
Prototype String对象 学习
2009/07/19 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
js原型链原理看图说明
2012/07/07 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
详谈javascript异步编程
2016/02/21 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
JS实现小星星特效
2019/12/24 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
Python实现的归并排序算法示例
2017/11/21 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
机关工会工作总结2015
2015/05/26 职场文书
八月一日观后感
2015/06/10 职场文书
校园广播稿范文
2015/08/19 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
Mysql文件存储图文详解
2021/06/01 MySQL
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android