标签：height text resid type video doctype show function name
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>
标签：height text resid type video doctype show function name
原文地址：https://www.cnblogs.com/webwrangler/p/8855931.html
