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实现视频无缝轮播
原文地址：https://www.cnblogs.com/webwrangler/p/8855931.html