先說下我的需求，如下圖：
手機模型中間部分是視訊播放，當一條視訊播放完畢後，整屏會自動上滑切換到下一個視訊。

提起輪播，我們看到的最多的就是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);
}