网页视频轮播video

    最近，在项目的实际开发中，有遇到UI设计的视频轮播的效果，在实际解决之前，在网上查找了相关资料，有看到一篇CDSN的博客，有所启发，现根据实际遇到的问题，做如下记录。

一、实例相关情况介绍

          参考的实例效果如下所示：

   首先，总共有5个视频进行展示，点击左右按钮可以进行轮播切换，当前视频始终位于最上层，并且居中显示，div尺寸最大，第二层尺寸缩小，第三层再缩小显示。

二、运用的实例代码

 <div class="teaching-video">
        <div class="tea-video-title">
          <div class="tea-video-h1 text-center"><img src="images/tv2.png" style="width:47px;height:49px;">  教学视频</div>
          <h3 class="tea-video-h3 text-center">雄厚的师资力量是选择教育机构的重要因素</h3>
        </div>
        <div class="tea-video-cont">
				<div class="video">
					<div></div>
					<div>
					<ul>
						<li class="video1"><div><video preload="none" controls loop><source src="video/456.mp4"></source>您的浏览器不支持HTML5视频播放，请升级浏览器。</video><h3></h3></div></li>
						<li class="video2"><div><video preload="none" controls loop><source src="video/456.mp4"></source>您的浏览器不支持HTML5视频播放，请升级浏览器。</video><h3></h3></div></li>
						<li class="video3"><div><video preload="none" controls loop autoplay><source src="video/456.mp4"></source>您的浏览器不支持HTML5视频播放，请升级浏览器。</video><h3></h3></div></li>
						<li class="video4"><div><video preload="none" controls loop><source src="video/456.mp4"></source>您的浏览器不支持HTML5视频播放，请升级浏览器。</video><h3></h3></div></li>
						<li class="video5"><div><video preload="none" controls loop><source src="video/456.mp4"></source>您的浏览器不支持HTML5视频播放，请升级浏览器。</video><h3></h3></div></li>
					</ul>
					</div>
					<div></div>
				</div>
         </div> 
    </div>

.teaching-video{
	background-color:#ffffff;
	padding-top:50px;
	padding-bottom:50px;
}
.teaching-video .tea-video-title{
	margin:20px auto 50px;
}
.teaching-video .tea-video-title .tea-video-h1{
	font-size:30px;
	color:#ef7700;
	height:50px;
	line-height:50px;
}
.teaching-video .tea-video-title .tea-video-h3{
	font-size:16px;
	color:#666666;
}
.teaching-video .tea-video-cont{
	margin-bottom:50px;
}
.teaching-video li{list-style: none;}
.video{width:1200px;margin:0 auto;overflow: hidden;zoom:1;background: #ffffff;}
.video>div{float: left;height: 400px;}
.video>div:first-child {width: 5%;background: url(../images/video-btn-l.png) center center no-repeat;}
.video>div:last-child {width: 5%;background: url(../images/video-btn-r.png) center center no-repeat;}
.video>div:nth-of-type(2){width: 90%;}
.video ul{position: relative;}
.video li{transition: all .6s; position: absolute;background: url(../images/video-bg.png) center center no-repeat;background-size: 100% 100%;}
/*.video li>div{padding: 1% 1% 4%;}*/
.video li video{width:100%;height:100%;}
.video li h3{text-align: center;margin-top: 2px;color: #1766d7;}
.video li:nth-of-type(1) video{background: url(../images/video03.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(2) video{background: url(../images/video01.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(3) video{background: url(../images/video02.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(4) video{background: url(../images/video03.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(5) video{background: url(../images/video01.jpg) no-repeat;background-size: cover;}
.video1{width: 200px;height: 100px; top: 143px;left: 0; z-index: 1;}/*创建5个播放框初始位置类，可自行更改*/
.video2{width: 400px;height: 200px; top: 86px;left: 90px; z-index: 2;}
.video3{width: 700px;height: 350px; top: 0px;left: 190px; z-index: 3;}
.video4{width: 400px;height: 200px; top: 86px;left: 590px; z-index: 2;}
.video5{width: 200px;height: 100px; top: 143px;left: 880px; z-index: 1;}

<script type="text/javascript">
$(function(){
var click=0;
var right=0;      //解决第一次右边点击没反应
$('.video>div:first-child').click(function(){    //当点击左边按钮
for(var i=0; i<5; i++){
document.getElementsByTagName('video')[i].pause();}
click+=1;
if(click>=6)click=1;
right=1;
$('.video li:nth-of-type('+(((click+0)<=5) ? (click+0) : (click+0-5))+')').attr('class','video5');
$('.video li:nth-of-type('+(((click+1)<=5) ? (click+1) : (click+1-5))+')').attr('class','video1');
$('.video li:nth-of-type('+(((click+2)<=5) ? (click+2) : (click+2-5))+')').attr('class','video2');
$('.video li:nth-of-type('+(((click+3)<=5) ? (click+3) : (click+3-5))+')').attr('class','video3');
$('.video li:nth-of-type('+(((click+4)<=5) ? (click+4) : (click+4-5))+')').attr('class','video4');
})
$('.video>div:last-child').click(function(){  //当点击右边按钮
for(var i=0; i<5; i++){
document.getElementsByTagName('video')[i].pause();}
click-=1;
if(click<=0)click=5;
if(!right)click=4;  //解决第一次右边点击没反应
right=1;
$('.video li:nth-of-type('+(((click+0)<=5) ? (click+0) : (click+0-5))+')').attr('class','video5');
$('.video li:nth-of-type('+(((click+1)<=5) ? (click+1) : (click+1-5))+')').attr('class','video1');
$('.video li:nth-of-type('+(((click+2)<=5) ? (click+2) : (click+2-5))+')').attr('class','video2');
$('.video li:nth-of-type('+(((click+3)<=5) ? (click+3) : (click+3-5))+')').attr('class','video3');
$('.video li:nth-of-type('+(((click+4)<=5) ? (click+4) : (click+4-5))+')').attr('class','video4');
})
})
</script>

三、总结

      在实际测试的时候，发现当页面内容较多时，游览器加载完页面的视频区域时，视频就会自动播放，用户体验不是很好。在查阅资料的时候，发现采用预加载模式时，可以改善。（预加载的好处：因为等你播放的时候，会出现一段时间黑屏效果不是很好，采用预加载的方式，等到播放的时候就直接播放就可以了，服务器不处理的话，视频会等到全部下载完之后才会播放。）

     关于视频存放的方式：

    ①视频存放在自己的服务器上

    这也是我实际采用的方式，根据实际情况，这种方案适用于视频较小的情况下，可以采用预加载的模式；

    ②采用第三方网站进行托管视频

    这种适用于视频较大，但是使用量较小的情况，因为广告的问题，所以我们要在第三方视频网站进行开发者认证，这样就可以去掉首页的广告，视频所需的后端服务就由第三方网站进行提供，它们把视频进行转码，分片传输等，但是如果视频比较多，就得自己做后端服务了。

    如果大家有更简便的方法，欢迎留言交流，感谢指点。如文章哪里有问题，欢迎大家进行指正。

版权声明：本文为博主原创文章，未经博主允许不得转载。