js实现视频无缝轮播

Posted 2020-10-31 webwrangler

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现视频无缝轮播相关的知识，希望对你有一定的参考价值。

js实现视频的无限轮播，不引入任何插件：

<!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>视频无限轮播，样式可自定义</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 = ‘‘;  //资源url
        
        //视频列表数据，三个视频
        var videoList = [
            {resid:‘video/1.mp4‘},
            {resid:‘video/2.mp4‘},
            {resid:‘video/3.mp4‘}              
        ];  
        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 += ‘<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实现视频无缝轮播的主要内容，如果未能解决你的问题，请参考以下文章

使用js和css-transition属性57行代码实现简易无缝轮播图

jQuery插件版无缝轮播，重写了之前的代码，显得更高大上一点

原生js实现无缝轮播

js实现效果：循环轮播图

js实现无缝轮播

分别用css3JS实现图片简单的无缝轮播功效