最近，在專案的實際開發中，有遇到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>
 

三、總結

      在實際測試的時候，發現當頁面內容較多時，遊覽器載入完頁面的視訊區域時，視訊就會自動播放，使用者體驗不是很好。在查閱資料的時候，發現採用預載入模式時，可以改善。（預載入的好處：因為等你播放的時候，會出現一段時間黑屏效果不是很好，採用預載入的方式，等到播放的時候就直接播放就可以了，伺服器不處理的話，視訊會等到全部下載完之後才會播放。）

     關於視訊存放的方式：

    ①視訊存放在自己的伺服器上

  這也是我實際採用的方式，根據實際情況，這種方案適用於視訊較小的情況下，可以採用預載入的模式；

    ②採用第三方網站進行託管視訊

  這種適用於視訊較大，但是使用量較小的情況，因為廣告的問題，所以我們要在第三方視訊網站進行開發者認證，這樣就可以去掉首頁的廣告，視訊所需的後端服務就由第三方網站進行提供，它們把視訊進行轉碼，分片傳輸等，但是如果視訊比較多，就得自己做後端服務了。

 如果大家有更簡便的方法，歡迎留言交流，感謝指點。如文章哪裡有問題，歡迎大家進行指正。