js to realize seamless video rotation

js implements infinite video rotation without introducing any plugins:
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Unlimited video rotation, style can be customized</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="video_list">
            <div class="video_ls"></div>
        </div>
    </div>
    
    
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        var cdnUrl = '';   // resource url
        
        // Video list data, three videos 
        var videoList = [
            {resid:'video/1.mp4'},
            {resid:'video/2.mp4'},
            {resid:'video/3.mp4'}              
        ];  
        var leg = videoList.length;
        
        $(document).ready( function (){
             // Load video list 
            var str='' ;
             for ( var i=0;i<leg;i++ ){
                loadvideo(videoList[i],i);  
            }
        
            // Implement seamless scrolling 
            var clone = $(".video_ls .video_shows").first().clone( true ); // Clone the first video 
            $(".video_ls").append(clone); // Copy to the end of the list 
            var size = $('.video_shows' ).length;
        
            // Video height 
            var _height = $('.video_shows' ).outerHeight();
        
            // Initialize playing the first 
            var video_show = $('.video_shows' );
             var video = $('.video_shows video' );       
            video[0].load();     
            video[ 0 ].play(); 
             var num =0;   // The subscript of the currently playing video 
            playlist(video);
             function playlist(video){
                 // Monitor whether the current video is finished 
                video[num].onended = function ( ){
                     // console.log("The first "+(num+1)+" video is finished") 
                    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); 
                }               
            }           
        })
        // Load the video playback interface 
        function loadvideo(videodta,i){
               str = '';
               str += '<div class="video_shows">';
               str += '<video id="myvideo'+(i+1)+'" class="video-js vjs-big-play-centered"  preload="auto">';
               str += '<source src="'+cdnUrl+videodta.resid+'" type="video/mp4">';
               str += '</video>';
               str += '</div>';
               $(".video_ls").append(str);
        }
    </script>
</body>
</html>
js to realize seamless video rotation

Guess you like
