[html5]html5连播多个视频的处理方法源代码范例
很简单,就是简历一个数组,存放视频文件;然后对vedio设置src属性,就是逐个添加视频文件,并监听播放是否结束;结束就修改src,换成下一个视频;如此循环。
[html5]html5连播多个视频的处理方法源代码范例
- <video id="video1" class="indexBanner" autoplay>
- <!-- <source src="vedio/first.mp4" type="video/mp4" />
- <source src="vedio/second.mp4" type="video/mp4" /> --> <!-- <source src="vedio/second.ogg" type="video/ogg" /> -->
- Your browser does not support HTML5 video. </video>
- <script type="text/javascript">
- debugger;
- var vList = [ 'vedio/first.mp4', 'vedio/second.mp4' ]; // 初始化播放列表 var
- vLen = vList.length; // 播放列表的长度
- var curr = 0; // 当前播放的视频
- var video = document.getElementById("video1");
- video.addEventListener('ended', play);
- play();
- function play() {
- var video = document.getElementById("video1");
- video.src = vList[curr];
- video.load(); //如果短的话,可以加载完成之后再播放,监听 canplaythrough 事件即可
- video.play();
- curr++;
- if (curr >= vLen)
- curr = 0; // 播放完了,重新播放
- }
- </script>
来源:http://blog.csdn.net/fengzijinliang/article/details/51685976
热门文章推荐
- 10款html5网页播放器推荐(总有一款适合你)
- [html5]html5+css3实现图片斜角切成直角梯形显示的源代码
- [HTML5]HTML5视频video时间事件代码
- [微信]iOS苹果和微信中音频和视频实现自动播放的方法
- [html5]html5视频全屏实现的源代码
- [Html5]mobile-agent移动Agent,就是具有移动性的智能Agent
- [html5]视频播放器js控制vedio视频和分段播放
- [html5]H5播放器:竖屏播放\横屏播放\跟随旋转例子
请稍候...