跟轮播效果差不多

页面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. Highcharts X轴名称太长,如何设置下面这种样式

      Highcharts所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过chart.inverted = true 可以让x, ...

  2. linux程序设计1

    a.out 的意思是 assembler output,即汇编输出. C语言的头文件一般位于 /usr/include/ 目录下,而依赖于特定 Linux 版本的头文件通常可在目录 /usr/incl ...

  3. Ajax中的get和post两种请求方式的异同

    Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解get和post的区别.   1. get是把参数数据队列加到提交表单的A ...

  4. [译]Node.js面试问与答

    原文: http://blog.risingstack.com/node-js-interview-questions/ 什么是error-first callback? 如何避免无休止的callba ...

  5. jquery 使用textarea

    问题: 若在textarea标签中键入一个回车时,将插入2个字符\n\r ,将在datagrid不能正确显示. \n: 回车符 \r: 换行符  解决方案: txt = txt.Replace(&qu ...

  6. ZOJ 3711 Give Me Your Hand

    Give Me Your Hand Time Limit: 2 Seconds      Memory Limit: 131072 KB      Special Judge BellyWhite a ...

  7. tcl调用tuxedo的一个demo

    Tuxedo是Oracle的一个商业中间件,一般用于通信. 如下是一个简单的调用tuxedo的so动态库实现,编译后,tcl脚本可以加载并调用这个so库实现对tuxedo的调用. 1. 代码例子,保存 ...

  8. CSU 1120 病毒(DP)

    题目链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1120 解题报告:dp,用一个串去更新另一个串,递推方程是: if(b[i] > a ...

  9. UOJ#35 —— 后缀排序

    1.题目大意:后缀数组模板题 2.分析:汝佳的书上的代码的有bug,还有那个n是字符串长度+1,''也要加入排序的 存个模板QAQ #include <cstdio> #include & ...

  10. python trackback的使用心得

    以前在读代码的时候总是要花很久时间去找在哪里调用的某个函数,现在好了,直接使用:trackback.print_stack()就可以打印出调用栈了,在那个地方调用的一目了然... 而如果是异常栈的话就 ...