H5 多个视频 循环播放效果
跟轮播效果差不多
页面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 多个视频 循环播放效果的更多相关文章
- 深入理解MVC C#+HtmlAgilityPack+Dapper走一波爬虫 StackExchange.Redis 二次封装 C# WPF 用MediaElement控件实现视频循环播放 net 异步与同步
深入理解MVC MVC无人不知,可很多程序员对MVC的概念的理解似乎有误,换言之他们一直在错用MVC,尽管即使如此软件也能被写出来,然而软件内部代码的组织方式却是不科学的,这会影响到软件的可维护性 ...
- 在wpf中如何让MediaElement的视频循环播放
原文:在wpf中如何让MediaElement的视频循环播放 MediaElement原始的播放是只播放一遍:如何设置让MediaElement播放 的视频或者音频循环播放,解决如下: 修改Media ...
- iOS - 视频循环播放
录制完视频后,我们想在录制视频的预览层上无限循环播放我们的小视频,是不是很炫酷,这时候我们就有三中选择了:1.MPMoviePlayerController2.AVPlayer3.AVAssetRea ...
- C# WPF 用MediaElement控件实现视频循环播放
在WPF里用MediaElement控件,实现一个循环播放单一视频的程序,同时可以控制视频的播放.暂停.停止. 一种方式,使用MediaElement.MediaEnded事件,在视频播放结束后,自动 ...
- video标签实现多个视频循环播放
<head> <!-- If you'd like to support IE8 (for Video.js versions prior to v7) --> </he ...
- HTML5实现两个视频循环播放!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- h5中嵌入视频自动播放的问题
在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 各种查资料,找到一个方法, ...
- html5 css3 背景视频循环播放代码
<div style ="position: absolute; z-index: -1; top: 0px; left: 0px; bottom: 0px; right: 0px; ...
- leaflet视频监控播放(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
随机推荐
- C语言动态内存分配
考虑下面三段代码: 片段1 void GetMemory(char *p) { p = (); } void Test(void) { char *str = NULL; GetMemory(str) ...
- Java基础相关总结
临近面试,权当复习了吧 final相关 定义常量的方法 eg:final int i=0;//则i不能被修改 final修饰的类不能被继承,因此没有子类,且它的类中的方法默认是final final ...
- Express开发实例(1) —— Hello,world!
Express是NodeJs开发中最常用的基础模块.NodeJs本身有Http模块,但是易用性并不好,因此有人在此基础上开发了Express模块. 什么是express express提供了丰富的路由 ...
- WCF--提示:"未找到终结点。"
刚开始调用WCF的时候一直报错... ““System.ServiceModel.EndpointNotFoundException”类型的异常在 mscorlib.dll 中发生,但未在用户代码中进 ...
- IIS 您要访问的网页有问题,无法显示!
提示:您要访问的网页有问题,无法显示.HTTP 500 – 内部服务器错误.”的问题解决方案! IIS服务器出现错误的原因很多,请尝试以下操作:1.查看网站属性——文档看看启用默认文档中是否存在:in ...
- HDU 2007
/*杭电ACM ID:2007*/ #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> int main() { int in1, in2 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载(二)
最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...
- Spring的问题解决记录
问题:在MyEclipse中项目工程重命名以后,例如 原来叫HttpService,改为GameApp,但是项目跑起来发现,tomcat服务器依旧为GameApp目录结构,访问也只能GameApp访问 ...
- Python制作统计图形
转载自:http://www.dcharm.com/?p=15 Python一般使用Matplotlib制作统计图形,用它自己的说法是‘让简单的事情简单,让复杂的事情变得可能’.(你说国外的“码农”咋 ...
- java web 相对路径中已/开头和不已/开头的区别
通俗的讲,有/会从跟目录开始算,没有会从当前目录开始算 1.前台页面 页面中向服务器页面请求静态资源且没有指定<base href="<%=basePath%>" ...