H5页面中的视频轮播（类似于banner轮播图效果）

先说下我的需求，如下图：
手机模型中间部分是视频播放，当一条视频播放完毕后，整屏会自动上滑切换到下一个视频。

详细效果展示请在PC端点击：http://www.17jianyue.cn/ 查看

提起轮播，我们看到的最多的就是banner轮播图，而提起轮播图，我会马上想起用Swiper。
一开始为了快速开发，就想着用swiper来实现切换视频的轮播效果，但是尝试后发现两个严重的问题：
1、使用Swiper实现轮播时，所设定的轮播时间间隔是固定的值，而视频播放时间长短不同，因此视频轮播是根据视频时长而定的。
2、如果使用swiper，强制设定固定时间间隔来切换播放，这样会导致视频列表中的视频会同时播放。换言之，就是刚进入页面后，虽然页面上显示的是第一条视频在播放，但后台其实是所有视频都在同时加载播放。
因此，swiper可以不用再考虑。

---

下面进入重点：

视频播放时，何时才能切换下一条？当视频播放完毕时。因此需要用到ended()事件来监控是否播放完毕。
轮播时要实现无缝轮播效果。

代码重点展示js部分：

html:

   <div class="video_list">    <div class="video_ls"></div>   </div>

js:

var cdnUrl = '';  //资源url//视频列表数据，三个视频var videoList = [    {        resid:'j1q9vb170b2769761317e270eccdfe778e0b46df.mp4',        user_img:'user_xx.png',        dialog_img:'dialog_xx.png',        topic_img:'topic_xx.png'    },    {        resid:'j1yvqkg00b2769761317e270eccdfe778e0b46df.mp4',        user_img:'user_xyj.png',        dialog_img:'dialog_xyj.png',        topic_img:'topic_xyj.png'    },    {        resid:'j2037nea006c4c1b8a8ac173362ee25ee7ec24c4.mp4',        user_img:'user_3.png',        dialog_img:'dialog_3.png',        topic_img:'topic_3.png'    },              ];  var leg = videoList.length;   $(document).ready(function(){    //加载视频列表    var str='';    for(var i=0;i<leg;i++){        loadvideo(videoList[i],i);      }    //实现无缝滚动    var clone = $(".video_ls .video_shows").first().clone(true);//克隆第一个视频    $(".video_ls").append(clone);//复制到列表最后    var size = $('.video_shows').length;    //视频高度    var _height = $('.video_shows').outerHeight();    //初始化播放第一条    var video_show = $('.video_shows');    var video = $('.video_shows video');           video[0].load();         video[0].play();      var num =0;  //当前播放视频的下标     playlist(video);     function playlist(video){         //监控当前视频是否播放完毕         video[num].onended = function(){            //console.log("第"+(num+1)+"条视频播放完毕")            num++;                          if(num<video.length){                var _top = -_height*(num)+'px';                $('.video_ls').animate({'top':_top},'1500')                                        }else{                    num=1;                    $(".video_ls").css('top','0');                    $('.video_ls').animate({'top':-_height},'1500')                                        }            video[num].load();                 video[num].play();             return playlist(video);         }                   }           })//加载视频播放界面function loadvideo(videodta,i){   str = '';   str += '<div class="video_shows">';   str += '<div class="userInfo"><img src="image/'+videodta.user_img+'"/></div>';                 str += '<div class="dialog"><img src="image/'+videodta.dialog_img+'"/></div>';   str += '<div class="more"></div>';   str += '<div class="topic_content"><img src="image/'+videodta.topic_img+'"/></div>';   str += '<div class="phone_btm"></div>';   str += '<video id="myvideo'+(i+1)+'" class="video-js vjs-big-play-centered"  poster="'+cdnUrl+videodta.resid+'?vframe/jpg/offset/0"   preload="auto">';   str += '<source src="'+cdnUrl+videodta.resid+'" type="video/mp4">';   str += '</video>';   str += '</div>';   $(".video_ls").append(str);}