<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. 【GS文献】基因组选择在植物分子育种应用的最新综述（2020）

    目录 1. 简介 2. BLUP类模型 3. Bayesian类模型 4. 机器学习 5. GWAS辅助的GS 6. 杂交育种 7. 多性状 8. 长期选择 9. 预测准确性评估 10. GS到植物育 ...

  2. X-MagicBox-820的luatOS之路连载系列6

    继上次用Qt实现了显示地图和MQTT通信之后(X-MagicBox-820的luatOS之路连载系列5),说是要研究下地图的开放接口,也看了标记点和线的方法(地图上自定义标记点和轨迹线的实现).这次就 ...

  3. 基于《CSAPP第九章 虚拟内存》的思考和总结

    在csapp的描述中,虚拟内存的形象更加具化,虚拟内存被组织为一个由存放在磁盘上的N个连续的字节大小的单元组成的数组,内存充当了磁盘的缓存,粗呢内存的许多概念与SRAM缓存是相似的.虚拟页面有以下三种 ...

  4. mysql数据操作语言DML

    插入insert 插入方式1 语法: insert into 表名(列名,....) values(值1,....) 说明: 1.插入的值的类型要与列的类型一致或兼容 2.可以为null的值:①列写了 ...

  5. nuxt使用图片懒加载vue-lazyload

    对于nuxt使用第三方插件的方式大体都是都是一致的,就是在plugins文件夹中新增插件对应的js文件进行配置与操作,然后在nuxt.config.js文件的plugins配置项中引入新建的js文件就 ...

  6. day02 Linux基础

    day02 Linux基础 1.什么是服务器 服务器,也称伺服器,是提供计算服务的设备.由于服务器需要响应服务请求,并进行处理,因 此一般来说服务器应具备承担服务并且保障服务的能力. windows: ...

  7. Java【常用的日期操作】

    目录 1.设置时间 2.获取年月日时分秒 3.通过运算获取时间 4.和Date类转换 5.格式化时间 6.新功能LocalDate:当前日期格式化 7.示例 java.util.Calendar 类是 ...

  8. 安全相关，CSRF

    先说下CSRF的定义 跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通常缩写为 CSRF ...

  9. 【Reverse】每日必逆0x03

    BUU-刮开有奖 附件:https://files.buuoj.cn/files/abe6e2152471e1e1cbd9e5c0cae95d29/8f80610b-8701-4c7f-ad60-63 ...

  10. Shell学习（五）—— awk命令详解

    一.awk简介   awk是一个非常好用的数据处理工具,相对于sed常常作用于一整个行的处理,awk则比较倾向于一行当中分成数个[字段]处理,因此,awk相当适合处理小型的数据数据处理.awk是一种报 ...