<head>

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->

</head>

<body>

  <video  id="myvideo" width="100%" height="auto" controls="controls" muted> <!-- 加muted 是为了可以实现自动播放  -->

                你的浏览器不支持HTML5播放此视频

        <span style="white-space:pre">    </span><!-- 支持播放的文件格式 -->

         <source src="" type='video/mp4' />

 </video>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>

  <script>   

				var video = document.getElementById("myvideo");

				var vList = ['/u/www/201610/101338015yhf.mp4', '/u/www/202001/1513372485r9.mp4']; // 初始化播放列表，这里的url要用相对路径

				var vLen = vList.length;

                var curr = 0;

				$(document).ready(function(){ 

                         play();   

                        video.addEventListener('ended', function(){

                            play();

                        });  

                        });						

                        function play() {

                            video.src = vList[curr];

                            video.load();

                            video.play();

                            curr++;

                            if(curr >= vLen){

                                curr = 0; //重新循环播放

                            }   

                        }

</script>

</body>

　　

video标签实现多个视频循环播放的更多相关文章

  1. H5 多个视频 循环播放效果

    跟轮播效果差不多 页面HTML结构 <video id="myvideo" width="100%" height="auto" co ...

  2. 深入理解MVC C#+HtmlAgilityPack+Dapper走一波爬虫 StackExchange.Redis 二次封装 C# WPF 用MediaElement控件实现视频循环播放 net 异步与同步

    深入理解MVC   MVC无人不知,可很多程序员对MVC的概念的理解似乎有误,换言之他们一直在错用MVC,尽管即使如此软件也能被写出来,然而软件内部代码的组织方式却是不科学的,这会影响到软件的可维护性 ...

  3. 在wpf中如何让MediaElement的视频循环播放

    原文:在wpf中如何让MediaElement的视频循环播放 MediaElement原始的播放是只播放一遍:如何设置让MediaElement播放 的视频或者音频循环播放,解决如下: 修改Media ...

  4. 解决h5的video标签，android、ipad客户端播放正常，iphone客户端无法播放

    在做html5时插入一个视频播放标签video后,测试时android.ipad客户端播放正常,唯独iphone自带浏览器无法播放. 解决办法: 判断用户所使用客户端访问h5页面时是iphone时,点 ...

  5. iOS - 视频循环播放

    录制完视频后,我们想在录制视频的预览层上无限循环播放我们的小视频,是不是很炫酷,这时候我们就有三中选择了:1.MPMoviePlayerController2.AVPlayer3.AVAssetRea ...

  6. C# WPF 用MediaElement控件实现视频循环播放

    在WPF里用MediaElement控件,实现一个循环播放单一视频的程序,同时可以控制视频的播放.暂停.停止. 一种方式,使用MediaElement.MediaEnded事件,在视频播放结束后,自动 ...

  7. HTML5实现两个视频循环播放！

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. html5 css3 背景视频循环播放代码

    <div style ="position: absolute; z-index: -1; top: 0px; left: 0px; bottom: 0px; right: 0px; ...

  9. 解决html5中video标签无法播放mp4问题的办法

    这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...

随机推荐

  1. 中兴交换机基础配置（备份、dhcp中继、monitor）

    1. 备份配置 格式: copy tftp/sftp/ftp [vrf mng] root: 本地文件 远端文件 1. 通过tftp进行备份,vrf mng表示指定使用管理口链路连接 copy tft ...

  2. 【模板】滑动窗口最值（单调队列）/洛谷P1886

    题目链接 https://www.luogu.com.cn/problem/P1886 题目大意 有一个长为 \(n\) 的序列 \(a\) ,以及一个大小为 \(k\) 的窗口.现在这个从左边开始向 ...

  3. Kubernetes：应用自动扩容、收缩与稳定更新

    在前面我们已经学习到了 Pod 的扩容.滚动更新等知识,我们可以手动为 Deployment 等设置 Pod 副本的数量,而这里会继续学习 关于 Pod 扩容.收缩 的规则,让 Pod 根据节点服务器 ...

  4. 巩固javaweb的第三十天

    显示用户输入信息 1 .代码 要想输出用户在上一个页面提交的信息,可以使用下面的代码: ${param.userid} ${param.username} ${param.userpass} ${pa ...

  5. day06 python代码操作MySQL

    day06 python代码操作MySQL 今日内容 python代码操作MySQL 基于python与MySQL实现用户注册登录 python操作MySQL python 胶水语言.调包侠(贬义词& ...

  6. day02 MySQL基本操作

    day02 MySQL基本操作 昨日内容回顾 数据库演变史 1.纯文件阶段 2.目录规范 3.单机游戏 4.联网游戏 # 数据库就是一款帮助我们管理数据的程序 软件开发架构及数据库本质 cs架构与bs ...

  7. C++一元多项式求导

    这个题难度不大但是坑有点多,要考虑的点有几个: 1.测试用例为x 0 这个直接输出 0 0即可. 2.注意空格的输出 3.测试点3我好几次都没过,最后参考了别的答案加以修改才通过. 测试点3没过的代码 ...

  8. Android Bitmap 全面解析(一)加载大尺寸图片

    压缩原因:1.imageview大小如果是200*300那么加载个2000*3000的图片到内存中显然是浪费可耻滴行为;2.最重要的是图片过大时直接加载原图会造成OOM异常(out of memory ...

  9. android知识点duplicateParentState

    android知识点duplicateParentState 今天要做一个效果,组件RelativeLayout上有两个TextView,这两个TextView具有不同的颜色值,现在要的效果是,当Re ...

  10. GO 定时器NewTimer、NewTicker使用

    package main import ( "fmt" "sync" "time" ) /** *ticker只要定义完成,从此刻开始计时, ...