<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. CF1463E Plan of Lectures

    考虑我们两种操作: 我们把第一种操作在\(x\to y\)连一条权为-1的边. 第二种操作\(x\to y\)连-1,\(y\to x\)连1的边. 当无法操作则是环里有负环. 否则我们把第二种操作涉 ...

  2. Codeforces 1491H - Yuezheng Ling and Dynamic Tree（分块）

    Codeforces 题目传送门 & 洛谷题目传送门 *3400 的毒瘤 H 题,特意写个题解纪念一下( 首先对于这种数据结构不太好直接维护的东东可以考虑分块.然鹅我除了分块其他啥也没想到 我 ...

  3. 【k8s】使用Terraform一键部署EKS集群

    本文适用范文 使用AWS海外账号 对aws.terraform.k8s有一定的了解 新建一个独立的VPC Terraform简介 terraform是一个云端的资源编排工具,官方对自己的定位:Terr ...

  4. Excel-统一小括号格式（中文小括号，英文小括号）

    1.统一小括号格式(中文小括号,英文小括号) 公式=ASC("(") #"(" 解释函数: ASC(A1)#对于双字节字符集(DBCS)语言,将全角英文字符(即 ...

  5. 准确率,召回率,F值,ROC,AUC

    度量表 1.准确率 (presion) p=TPTP+FP 理解为你预测对的正例数占你预测正例总量的比率,假设实际有90个正例,10个负例,你预测80(75+,5-)个正例,20(15+,5-)个负例 ...

  6. mysql 除法运算保留小数的用法

    说明:刚开始用的round(值1/值2*100,1) 结果没出效果,才搜到decimal函数 在工作中会遇到计算小数而且需要显现出小数末尾的0,我们会用到DECIMAL这个函数,这是一个函数非常强悍: ...

  7. SPI详解2

    串行外设接口 (SPI) 总线是一种运行于全双工模式下的同步串行数据链路.用于在单个主节点和一个或多个从节点之间交换数据. SPI 总线实施简单,仅使用四条数据信号线和控制信号线(请参见图 1). 图 ...

  8. 02 Windows安装C语言开发工具CodeBlocks

    CodeBlocks安装 使用微信扫码关注微信公众号,并回复:"C语言环境",免费获取下载链接! 1.卸载CodeBlocks(电脑未装此软件,跳过)    进入目录:C:\Pro ...

  9. 日常Java 2021/11/3

    java网络编程 网络编程是指编写运行在多个设备(计算机)的程序,这些设备都通过网络连接起来.java.net包中J2SE的APl包含有类和接口,它们提供低层次的通信细节.你可以直接使用这些类和接口, ...

  10. Spark基础：（七）Spark Streaming入门

    介绍 1.是spark core的扩展,针对实时数据流处理,具有可扩展.高吞吐量.容错. 数据可以是来自于kafka,flume,tcpsocket,使用高级函数(map reduce filter ...