跟轮播效果差不多

页面HTML结构

<video  id="myvideo" width="100%" height="auto" controls="controls" >
你的浏览器不支持HTML5播放此视频
<span style="white-space:pre"> </span><!-- 支持播放的文件格式 -->
<source src="001.mp4" type='video/mp4' />
</video>

JS代码:

<script language="javascript">
$(document).ready(function(){
video.play();
}); var vList = ['001.mp4', 'video//1.mp4', 'video//02.mp4']; // 初始化播放列表
var vLen = vList.length;
var curr = 0;
var video = document.getElementById("myvideo");
video.addEventListener('ended', function(){
play();
}); function play() {
video.src = vList[curr];
video.load();
video.play();
curr++;
if(curr >= vLen){
curr = 0; //重新循环播放
} }
</script>

即可实现多视频循环播放

H5 多个视频 循环播放效果的更多相关文章

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

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

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

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

  3. iOS - 视频循环播放

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

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

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

  5. video标签实现多个视频循环播放

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

  6. HTML5实现两个视频循环播放!

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

  7. h5中嵌入视频自动播放的问题

    在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 各种查资料,找到一个方法, ...

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

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

  9. leaflet视频监控播放(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

随机推荐

  1. C#集合u

    List<T> 列表(动态数组),相当于C++的 vector Queue<T> 队列,先进先出 Stack<T> 栈,先进后出 LinkedList<T&g ...

  2. Javascript 中我很想说说的 this

    this是每一个想要深入学习Javascript的人必过的一关,我为this看过很多书查过很多资料,虽然对this有了一定的了解并且也经常使用this,但是如果有人问我  this是什么呀? 我依旧不 ...

  3. 高效率http页面优化法则一【JS对DOM的操作】

    高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...

  4. [译]git push

    push就是把你本地仓储的commit传到远程仓储中去. 用法 git push <remote> <branch> push指定的分支到<remote>中去.   ...

  5. ASP 编码转换(乱码问题解决)

    ASP 编码转换(乱码问题解决) 输出前先调用Conversion函数进行编码转换,可以解决乱码问题. 注,“&参数&”为ASP的连接符,这里面很多是直接调用的数据库表字段,实际使用请 ...

  6. 第一个C++例子

    #include <iostream> using namespace std; class Time { private: int hour; int minute; int secon ...

  7. Ruby学习之module

    我们可以认为module是一个专门存放一系列方法和常量的工具箱. module和class非常像, 只是module不能创建实例也不能有子类, 它们仅仅能存放东西. 例如: module Circle ...

  8. ubutu安装搜狗

    1.下载deb文件 下载32位 wget "http://pinyin.sogou.com/linux/download.php?f=linux&bit=32" -O &q ...

  9. FineUI第十五天---表格概述

    Grid表格概述  跟Asp.Net的差不多. 下面介绍一些属性:  ExpandUnusedSpace:此列充满所有的剩余空间,并且随着表格宽度变化而变化 DataToolTipField:用来显示 ...

  10. 关于phpcms中mysql和mysqli的区别

    用phpcms开发一个考试成绩查询的小模块,用电脑上以前下载的phpcms版本为框架开发,一切顺利.想着下载一个最新版本,以后也免了升级的麻烦.于是,下载好,然后把模块目录.model数据库连接文件. ...