网页视频轮播video

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

一、实例相关情况介绍

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

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

二、运用的实例代码

 <div class="teaching-video"><div class="tea-video-title"><div class="tea-video-h1 text-center"><img src="data: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>

三、总结

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

关于视频存放的方式：

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

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

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

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

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

网页视频轮播video相关推荐

使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？
一.需求分析这两天讨论了一个项目需求,刚开始是希望:轮播图中嵌入视频,轮播到视频自动播放,播放完毕切换下一张轮播,手动切换时暂停播放视频.后面因为自动播放没有声音,便暂时放弃了这个想法(有知道或了解 ...
3D视频轮播插件——web前端
网上找了很多3D视频轮播插件,不是样式不合适,就是代码太繁琐.自己利用CSS3动画transition编写的3D视频轮播插件. IE9开始才支持transition,所以只有在非IE浏览器.IE大于8 ...
uniapp APP端视频轮播问题
uniapp APP端视频轮播问题(黑屏,变形) 今天接到一个需求:需要在商品详情轮播展示视频,本以为很简单,但是发现好多坑,在app端出现黑屏,卡顿,变形,视频只展示半屏的情况. 完整代码放底下了 ...
H5页面中的视频轮播（类似于banner轮播图效果）
先说下我的需求,如下图: 手机模型中间部分是视频播放,当一条视频播放完毕后,整屏会自动上滑切换到下一个视频. 详细效果展示请在PC端点击:http://www.17jianyue.cn/ 查看提起轮 ...
Android 广告机图片视频轮播
最近因为要做一个广告机上图片视频轮播,所以又是百度,github上一堆找,结果发现并没有特别合适的,不是播放视频首帧黑屏,就是切换界面后,没法继续播放,或者动态更新数据后,没法继续轮播等等问题,所以最 ...
用flash制作一个倒计时（并插入宣传视频轮播）
公司需要制作一个小的倒计时,其中要插入一段视频轮播:使用了两个方案1.ppt;2flah.考虑到PPT播放起来的兼容性和安全性要求故采用Flash制作. 现写下其中关键点: 1.倒计时代码 now = ...
用JavaScript实现网页无限轮播图效果，附整套源码
用JavaScript实现无限轮播图效果(附源码) javascript群内每日课题-今日课题:用JavaScript实现无限轮播图效果 PS:很多企业通用的案例自己再学习过程中肯定是要熟练的,所以今 ...
JS学习之BOM | 常见网页特效 | 轮播图 | 返回顶部 | 筋斗云案例
封校后终于回家咯给即将中考的弟弟加油鼓劲,下午还和涛哥约会但是时间太短了.继续学习吧许个愿,让我中奖让我中奖让我中奖常见网页特效案例案例:网页轮播图(必须掌握) 轮播图装的图片和外面盒子一样大小 ...
手机端网页制作轮播图html怎么写,原生JS实现移动端web轮播图详解（结合Tween算法造轮子）...
前言相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改 ...

网页视频轮播video

网页视频轮播video相关推荐

最新文章

热门文章