3D视频轮播插件——web前端

最新推荐文章于 2024-07-26 15:58:30 发布

cow3530

最新推荐文章于 2024-07-26 15:58:30 发布

阅读量3.3k

点赞数 2

文章标签： 3D视频轮播插件 web视频播放视频

本文链接：https://blog.csdn.net/cow3530/article/details/78613339

版权

网上找了很多3D视频轮播插件，不是样式不合适，就是代码太繁琐。自己利用CSS3动画transition编写的3D视频轮播插件。

IE9开始才支持transition，所以只有在非IE浏览器、IE大于8才显示整个插件，IE6、E7、E8不显示。

video标签添加preload="none"非常重要，禁止视频预加载，提升插件性能。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D视频轮播插件</title>
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
.video{width: 1200px;margin: 0 auto;overflow: hidden;zoom:1;background: #eee;}
.video>div{float: left;height: 400px;}
.video>div:first-child {width: 5%;background: url(http://www.bdqnsz.com/skin/images/video-btn-l.png) center center no-repeat;}
.video>div:last-child {width: 5%;background: url(http://www.bdqnsz.com/skin/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(http://www.bdqnsz.com/skin/images/video-bg.png) center center no-repeat;background-size: 100% 100%;}
.video li>div{padding: 1% 1% 4%;}
.video li video{width: 100%;}
.video li h3{text-align: center;margin-top: 2px;color: #1766d7;}
.video li:nth-of-type(1) video{background: url(http://www.bdqnsz.com/d/file/video/ff5e863be13876d2cc7c297369825f69.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(2) video{background: url(http://www.bdqnsz.com/d/file/video/9ade5aac7b982c2aef51501c1eced9a9.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(3) video{background: url(http://www.bdqnsz.com/d/file/video/33f6d3031b768985bda7baa75fe2a780.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(4) video{background: url(http://www.bdqnsz.com/d/file/video/a195b024d3f25eea9016452a46db40f5.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(5) video{background: url(http://www.bdqnsz.com/d/file/video/174ed56f294d476910048403f72c6987.jpg) no-repeat;background-size: cover;}

.video1{width: 200px;height: 114px; top: 143px;left: 0; z-index: 1;} /*创建5个播放框初始位置类，可自行更改*/
.video2{width: 400px;height: 228px; top: 86px;left: 90px; z-index: 2;}
.video3{width: 700px;height: 400px; top: 0px;left: 190px; z-index: 3;}
.video4{width: 400px;height: 228px; top: 86px;left: 590px; z-index: 2;}
.video5{width: 200px;height: 114px; top: 143px;left: 880px; z-index: 1;}
</style>
</head>

<body>



<div class="video">
<div></div>
<div>
<ul>
<li class="video1"><div><video preload="none" controls loop><source src="video/jiaoxue.mp4" type="video/mp4"></source>您的浏览器不支持HTML5视频播放，请升级浏览器。</video><h3>北大青鸟教学篇</h3></div></li>
<li class="video2"><div><video preload="none" controls loop><source src="video/darenpian.mp4" type="video/mp4"></source>您的浏览器不支持HTML5视频播放，请升级浏览器。</video><h3>北大青鸟学员达人篇</h3></div></li>
<li class="video3"><div><video preload="none" controls loop autoplay><source src="video/shiaipian.mp4" type="video/mp4"></source>您的浏览器不支持HTML5视频播放，请升级浏览器。</video><h3>北大青鸟师爱篇</h3></div></li>
<li class="video4"><div><video preload="none" controls loop><source src="video/qingchunpian.mp4" type="video/mp4"></source>您的浏览器不支持HTML5视频播放，请升级浏览器。</video><h3>北大青鸟学员青春篇</h3></div></li>
<li class="video5"><div><video preload="none" controls loop><source src="video/chengzhangpian.mp4" type="video/mp4"></source>您的浏览器不支持HTML5视频播放，请升级浏览器。</video><h3>北大青鸟学员成长篇</h3></div></li>
</ul>
</div>
<div></div>
</div>
<![endif]-->

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(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>
</body>
</html>