<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. Python—python2.7.5升级到2.7.14或者直接升级到3.6.4

    python2.7.5升级到2.7.14 1.安装升级GCC yum install -y gcc* openssl openssl-devel ncurses-devel.x86_64  bzip2 ...

  2. 二叉树——根据遍历结果，画出对应的二叉树 转载至：http://canlynet.blog.163.com/blog/static/255013652009112602449178/

    这道题目很经典,具体如下: 已知遍历结果如下,试画出对应的二叉树: 前序:A B C E H F I J D G K 中序:A H E C I F J B D K G 解题要点: 1.前序.中序.后序 ...

  3. URLDNS分析

    学习了很久的Java基础,也看了很多的Java反序列化分析,现在也来分析学习哈最基础的URLDNS反序列化吧. Java反序列化基础 为了方便数据的存储,于是乎有了现在的Java序列化于反序列化.序列 ...

  4. MapReduce08 数据清洗(ETL)和压缩

    目录 数据清洗(ETL) ETL清洗案例 需求 需求分析 实现代码 编写WebLogMapper类 编写WebLogDriver类 打包到集群运行 压缩 概念 MR支持的压缩编码 压缩算法对比 压缩性 ...

  5. A Child's History of England.6

    It was a British Prince named Vortigern who took this resolution, and who made a treaty of friendshi ...

  6. Android Menu的基本用法

    使用xml定义Menu 菜单资源文件必须放在res/menu目录中.菜单资源文件必须使用<menu>标签作为根节点.除了<menu>标签外,还有另外两个标签用于设置菜单项和分组 ...

  7. android知识点duplicateParentState

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

  8. 使用NSURLSessionDataTask实现大文件离线断点下载（完整）

    6.1 涉及知识点(1)关于NSOutputStream的使用 //1. 创建一个输入流,数据追加到文件的屁股上 //把数据写入到指定的文件地址,如果当前文件不存在,则会自动创建 NSOutputSt ...

  9. MyBatis(2)：CRUD操作

    编写接口 import com.shandx.pojo.User; import java.util.List; public interface UserMapper { <span clas ...

  10. Spring Boot下使用拦截器

    Spring Boot对于原来在配置文件配置的内容,现在全部体现在一个类中,该类需要继承自WebMvcConfigurationSupport类,并使用@Configuration进行注解,表示该类为 ...