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 ...
随机推荐
- shell学习之路:流程控制(for)
for循环的语法: 1. for 变量 in 值1 值2 值3.... do 程序 done 例如:下列脚本会分别打印4次 分别是morning noon afternoon evening的值 # ...
- Java字节流:FilterInputStream FilterOutputStream
----------------------------------------------------------------------------------- FilterInputStrea ...
- hdu4915 Parenthese sequence 贪心O(n)解法(new)
hdu4915 Parenthese sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K ...
- AlwaysOn可用性组功能测试(三)--其他测试
三. 大数据量操作的时候发生的切换 1.对表进行大量插入,执行1千万遍,如下语句 insert into aa select * from sys.sysprocesses go 10000000 2 ...
- java练手 韩信点兵
Problem C 韩信点兵 时间限制:3000 ms | 内存限制:65535 KB 描述 相传韩信才智过人,从不直接清点自己军队的人数,只要让士兵先后以三人一排.五人一排.七人一排地变换队 ...
- SqlServer中字符串和日期类型的转换
SQL Server Date 函数 定义和用法 CONVERT() 函数是把日期转换为新数据类型的通用函数. CONVERT() 函数可以用不同的格式显示日期/时间数据. 语法 CONVERT(da ...
- 【C语言入门教程】7.1 结构体类型变量的定义和引用
前面学习了变量和数组这些简单的数据结构,它们的特点是必须使用规定的数据类型.例如数组被定义为整型后,它的所有存储单元都是由整型构成.现实生活中某一类事物的共同属性可能是由不同的数据类型组成的集合,或者 ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
- .net生成二维码
下好QRCode.dll引用到项目中 using System; using System.Collections.Generic; using System.Linq; using System.W ...
- 快速入门SaltStack
导读 SaltStack是基于Python开发的一套C/S架构配置管理工具(功能不仅仅是配置管理,如使用salt-cloud配置AWS EC2实例),它的底层使用ZeroMQ消息队列pub/sub方式 ...