<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. Codeforces 559E - Gerald and Path（dp）

    题面传送门 真·难度 *3000 的 D1E hb 跟我们说"做不出来不太应该". 首先我们将所有线段按 \(a_i\) 从小到大排序,一个很显然的想法是 \(dp_{i,j,d} ...

  2. Kubernetes：Pod 升级、回滚

    本篇主要讨论如何实现滚动更新和回滚,任意更换版本并且回滚以前的版本(版本更新),而下一章会讨论到 Pod 缩放,根据机器资源自动拓展和收缩应用(自动扩容实例). 本文为作者的 Kubernetes 系 ...

  3. 【Perl】如何安装Bioperl模块？

    目录 失败尝试一:使用cpanm 失败尝试二:使用CPAN 成功尝试:直接conda安装bioperl 没有尝试:源码安装bioperl 生信软件绕不过Perl,Perl绕不过Bioperl.而Bio ...

  4. 学习java的第二十六天

    一.今日收获 1.java完全学习手册第三章算法的3.2排序,比较了跟c语言排序上的不同 2.观看哔哩哔哩上的教学视频 二.今日问题 1.快速排序法的运行调试多次 2.哔哩哔哩教学视频的一些术语不太理 ...

  5. 23. 关于Ubuntu中Could not get lock /var/lib/dpkg/lock解决方案

    原文:https://blog.csdn.net/u011596455/article/details/60322568 版权声明:本文为博主原创文章,转载请附上博文链接! 在Ubuntu中,有时候运 ...

  6. Leetcode中的SQL题目练习（一）

    595. Big Countries https://leetcode.com/problems/big-countries/description/ Description name contine ...

  7. 转 Android 多线程：手把手教你使用AsyncTask

    转自:https://www.jianshu.com/p/ee1342fcf5e7 前言 多线程的应用在Android开发中是非常常见的,常用方法主要有: 继承Thread类 实现Runnable接口 ...

  8. android转换透明度

    比方说 70% 白色透明度. 就用255*0.7=185.5  在把185.5转换成16进制就是B2 你只需要写#B2FFFFFF 如果是黑色就换成6个0就可以了.前2位是控制透明度的.

  9. SpringBoot(3)：SpringData 数据访问

    一. 简介 Spring Data是一个用于简化数据库访问,并支持云服务的开源框架:其主要目标是 使得对数据的访问变得方便快捷.对于数据访问层,无论是 SQL(关系型数据库) 还是 NOSQL(非关系 ...

  10. Mybatis-Plus默认主键策略导致自动生成19位长度主键id的坑

    原创/朱季谦 某天检查一位离职同事写的代码,发现其对应表虽然设置了AUTO_INCREMENT自增,但页面新增功能生成的数据主键id很诡异,长度达到了19位,且不是从1开始递增的-- 我检查了一下,发 ...