视频swiper轮播

关于本次文章的内容，实际上是咪咕阅读详情页中的一个前端需求要做的效果，不过比起原需求，此次案例已经被删减掉许多部分了。音频部分舍弃，调用客户端接口舍弃，并做一些整理。最后留下的是这个精简版的案例。方便各位可以快速看懂实现方式。

一、看看功能效果（动态图）：

二、案例需要实现的效果

提供一段视频信息的json数据，Js根据数据，动态生成swiper的视频轮播（一般功能性比较强的碎片区块，比较建议使用json+js来动态生成dom）
视频处在未播放时，每4秒进行一次从右向左轮播一屏，自动切换视频。
若视频信息只有一条，则不进行轮播。
当当前屏的视频封面被点击后，当前视频开始播放，当前封面隐藏，swiper将停止轮播。当当前屏的视频播放完后、或者用户手动点击视频的暂停后，当前视频隐藏，封面展示，并开始继续自动轮播。手滑也能强制轮播
若视频播放时，手滑强制轮播，则当前视频暂停。状态变为自动轮播。

三、处理的问题

优点：

比起单个视频，或者多个视频区块，更能节省用户可视期间。缩短用户需要拖动的下拉条，增加交互。

缺点：

不注意的用户可能会忽略没看到的视频信息。

四、案例展示

http://211.140.7.173:8081/t/wuhairui/video-audio/

五、实现步骤

1.首先创建一个移动端空html文档

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8"/>

  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>

  <title>视频swiper轮播效果</title>

</head>

<body>

</body>

</html>

2.Head中引入样式

<link rel="stylesheet" type="text/css" href="css/index.css"/>

3.Body中写入一个隐藏的div，并包含json数据

<div id="videoListJson" style="display:none">

  {"isShowVideo":"1","videolist":[{"desc":"极乐净土XAngelina","url":"http://t.cn/RimpsaA","img":"http://i1.hdslb.com/bfs/archive/59eadf4acd6b60ef41020cb6fae86e5145f7f056.jpg"},{"desc":"你的名字【日语】【lsrxzz000制作字幕】","url":"http://t.cn/R6cmZT2","img":"http://www.tucao.tv/uploadfile/2017/0219/thumb_140_90_20170219124350928.jpg"},{"desc":"【MAD】龙珠·超 青鸟","url":"http://t.cn/R6qvkNd","img":"http://www.tucao.tv/uploadfile/2017/0307/thumb_140_90_20170307113006983.jpg"},{"desc":"【MAD】龙珠·改 Dragon Soul","url":"http://t.cn/R6qPVuu","img":"http://www.tucao.tv/uploadfile/2017/0305/thumb_140_90_20170305073605557.jpg"},{"desc":"【泠鸢】犬夜叉ED - Dearest","url":"http://t.cn/R6cEn73","img":"http://i0.hdslb.com/bfs/archive/d1d832ff1901c7d0e110be848d15f802a20d9911.jpg"}],"size":"5"}

</div>

4.css/index.css中的样式

写基本的3个响应式布局：小屏、中屏、大屏的手机

/*视频样式*/

/*小屏手机*/

.media-poll{padding:0 18px 26px;position: relative;background:#fff;margin:-3px 0 8px;}

.media-poll .swiper-video video{width: 100%; position: relative;height: 159px;}

.media-poll .swiper-video{position: relative;overflow: hidden;}

.media-poll #swiper-wrapper{position: relative;}

.media-poll .posterBg{background-size: 100% 100%;width: 100%;height: 159px;z-index:;position: absolute;text-align: center;line-height:160px;}

.media-poll .swiper-video .posterBg .starticon{width: 44px;height: auto;}

.media-poll .swiper-pagination{width: auto;right:14px;margin-top:3px;}

.media-poll .sping-daodu{padding:13px 0 4px;font-size: 14px;color: #323232;}

.media-poll .swiper-slide .video-description{font-size: 12px;color: #a3a3a3;padding-bottom:6px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

.media-poll .swiper-pagination .swiper-pagination-bullet{margin-left:1px;}

.media-poll .swiper-pagination .swiper-pagination-bullet-active{background: #6ac7c9;}

.media-poll .topLogo{position: absolute;width: 100%;z-index:;top:0px;height: 31px;background-image: -webkit-gradient(linear,top,bottom, from(rgba(0,0,0,0.8)), to(rgba(0,0,0,0)));background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.8),rgba(0,0,0,0));}

.media-poll .topLogo img{position: relative;float: right;width: 43px;margin: 7px 14px 0px 7px;}

.media-poll .video-bg{position: relative;height:159px}

/*中屏手机*/

@media (min-width:321px) and (max-width:375px){

  .media-poll{padding:0 21px 30px;margin:-3px 0 9px}

  .media-poll .swiper-video video{width: 100%; height: 186px}

  .media-poll .posterBg{height: 186px;z-index:;line-height:188px}

  .media-poll .swiper-pagination{width: auto;right:16px;margin-top:3px}

  .media-poll .sping-daodu{padding:15px 0 5px;font-size: 16px;}

  .media-poll .swiper-slide .video-description{font-size: 14px;padding-bottom:7px}

  .media-poll .swiper-pagination .swiper-pagination-bullet{margin-left:1px;}

  .media-poll .topLogo{position: absolute;width: 100%;height: 36px;top:0px;background-image: -webkit-gradient(linear,top,bottom, from(rgba(0,0,0,0.8)), to(rgba(0,0,0,0)));background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.8),rgba(0,0,0,0));}

  .media-poll .topLogo img{width: 50px;margin: 8px 17px 0px 8px;}

  .media-poll .video-bg{height:186px}

}

/*大屏手机*/

@media (min-width:376px) and (max-width:1080px){

  .media-poll{padding:0 23px 33px;margin:-3px 0 10px}

  .media-poll .swiper-video video{width: 100%;height: 205px}

  .media-poll .posterBg{background-size: 100% 100%;width: 100%;height: 205px;z-index:;line-height:208px}

  .media-poll .swiper-pagination{width: auto;right:18px;margin-top:3px}

  .media-poll .sping-daodu{padding:17px 0 5px;font-size: 18px;}

  .media-poll .swiper-slide .video-description{font-size: 15px;padding-bottom:8px;}

  .media-poll .swiper-pagination .swiper-pagination-bullet{margin-left:1px;}

  .media-poll .topLogo{position: absolute;width: 100%;height: 40px;top:0px;background-image: -webkit-gradient(linear,top,bottom, from(rgba(0,0,0,0.8)), to(rgba(0,0,0,0)));background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.8),rgba(0,0,0,0));}

  .media-poll .topLogo img{width: 55px;margin: 9px 19px 0px 9px;}

  .media-poll .video-bg{height:205px}

}

5.样式存在后，在head中引入两个库（jquery库和swiper库）：

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js"></script>

6.Body中写入swiper初始结构：swiper的点将由swiper初始化后生成在swiper-pagination中。视频列表将由下方js生成在swiper-wrapper中

<div class="media-poll">

  <div class="sping-daodu">视频导读</div>

  <div class="swiper-video" id="swiper-video">

    <!--视频列表将生成在此div内-->

    <div class="swiper-wrapper" id="swiper-wrapper"></div>

  </div>

  <!--这是swiper的点-->

  <div class="swiper-pagination"></div>

</div>

7.开始写js部分：申明获取全局变量

var videoSwiper;//申明全局swiper

var swiperWrapper = $("#swiper-video").find("#swiper-wrapper");//swiperWrapper对象

获取dom中的视频数据

var jdata = JSON.parse($("#videoListJson").text());

有视频信息时执行下一步，无视频信息时隐藏

if(jdata!=undefined && jdata!=null && jdata!="" && Number(jdata.size)>0){/*有视频数据*/

  //下一步

}else{/*无视频数据*/

  $(".media-poll").hide();/*隐藏导读*/

}

下一步：

console.log(jdata);

var videolist = jdata.videolist;

var size = jdata.size;

//创建视频的描述、地址、封面的3个数组

var desc = [];

var url = [];

var img =[];

if(size <=1 && swiperWrapper){

  swiperWrapper.removeClass("swiper-wrapper");

}else if(size > 1 && swiperWrapper.not("swiper-wrapper")){

  swiperWrapper.addClass("swiperWrapper");

}

for(var i = 0 ;i < videolist.length ;i++ ){

  desc.push(videolist[i].desc);

  url.push(videolist[i].url);

  img.push(videolist[i].img);

}

将数据全部拼接成swiper的列表并append到dom的swiperWrapper对象中

for(var j = 0 ;j < desc.length ;j++){

  var slide = '<div>'+ "<p>" + desc[j] + "</p>" +"<div image='url("+img[j]+")' style='background-image:url("+img[j]+")'>"+'<img src="./image/playimg.png"/>'+"</div>"+"<div>"+'<video style="z-index:1" controls="controls" poster="'+img[j]+'" src="'+url[j]+'">'+'</video>'+'<div>'+"<img src='./image/miguIcon.png'>"+'</div>'+"</div>"+'</div>';

  swiperWrapper.append(slide);

}

渲染swiper效果

var videoBor = $(".swiper-slide");//video的swiper对象数组

var videolist = videoBor.find("video");//video对象数组

//渲染swiper效果

videoSwiper = new Swiper(".swiper-video",{

  autoplay:4000,

  followFinger:false,

  loop:true,

  pagination:'.swiper-pagination',

  autoplayDisableOnInteraction:false,

  onSlideChangeEnd: function(swiper){

    //轮播时暂停所有视频

    for(var k = 0 ;k<videolist.length;k++){

      videolist[k].pause();

    }

  }

});

swiper点击事件触发视频播放，封面隐藏，停止轮播

//重新获取video的swiper对象数组

var videoBor = $(".swiper-video .swiper-slide");

var length = videoBor.length;

/*点击单个swiper事件*/

videoBor.on("click",function(){

  videoSwiper.stopAutoplay();

  var _this=this;

  var $video = $(this).find("video");

  if($video[0].paused){

    playVideo($(_this));

  }

});

/*播放视频*/

function playVideo($obj){//播放选中视频(选中swiper对象)

  var videoActive = $obj.find("video").eq(0)[0];//当前video对象

  var videoPoster = $obj.find(".posterBg");//当前封面对象

  videoPoster.hide();

  videoActive.play();

  var activeIndex =  videoSwiper.activeIndex;//第几个video

  if(activeIndex == 1|| activeIndex ==length-1){

    $(".posterBg").eq(length-1).hide();

    $(".posterBg").eq(1).hide();

  }

}

视频暂停时事件，显示封面、隐藏视频开始自动轮播

var videolist = videoBor.find("video");//video对象数组

 /*暂停时事件*/

 videolist.on("pause",function(){

   /*所有封面浮层show&所有视频hide*/

   videoBor.find(".posterBg").show();

   videoBor.find("video").hide();

   var index =  videoSwiper.activeIndex;

   if(index == 1 || index == length-1){

     var timeall = $(this)[0].currentTime;

     videolist[0].currentTime = timeall;

     videolist[length-1].currentTime = timeall;

   };

   if($(this)[0].paused){

     videoSwiper.startAutoplay();

   }

 });

视频播放时事件，显示视频

/*播放时事件*/

videolist.on("play",function(){

  /*当前视频show*/

  $(this).show();

  if($(this)[0].play){

    videoSwiper.stopAutoplay();

  }

});

视频停止时事件，封面展示，视频隐藏，开始轮播

/*停止时事件*/

videolist.on("ended",function(){

  /*所以封面浮层show&所以视频hide*/

  videoBor.find(".posterBg").show();

  videoBor.find("video").hide();

  videoSwiper.startAutoplay();

});

更多文章请进入微信公众号：migufe

demo>>

视频swiper轮播的更多相关文章

swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
使用Swiper轮播插件引起的探索
提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的官方给的版本有三个,分别是Swiper2 ...
swiper轮播在ie浏览器上遇到的显示问题探索
前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小注:下图是我根据上面需求已经实现的效果,所以截图方便说明思考: ...
swiper轮播图（逆向自动切换类似于无限循环）
swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...
Android设备广告投放解决方案——大量网络图片、多个网络视频的轮播、缓存与更新
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7742996.html 一:业务场景基于Android系统的设备上投放广告,诸如:地铁广告屏.自助服务机器上的 ...
Swiper轮播图
今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码: <!DOCTYPE html> <html lang="en"> < ...
微信小程序_(组件)swiper轮播图
微信小程序swiper轮播图组件官方文档传送门 Learn: swiper组件一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...
Swiper轮播隐藏再显示后不动
公告用Swiper轮播方式,在某些不需要显示公告的页面进行隐藏,在需要展示公告的页面进行显示时候,公告不能正常轮播,在条件里加入重新设置轮播方法等网上的一些方法仍然不行,最后解决方法: this.my ...
Swiper轮播手动后不动
最近项目首页轮播图用了Swiper轮播,今天突然发现轮播图动画初始正常但是手动换过之后就不动了,解决方法有两种,具体根据采用的情况为准: 1.autoplayDisableOnInteraction: ...

随机推荐

C语言一维数组叠加为二维数组样例
这里参看memcpy的用法,将一个一维整型数组不停的叠加为二维数组使用宏定义来控制二维数组的行列代码如下: #include <stdio.h> #include <stdlib ...
Java Collection 接口、Set 接口、List 接口基本操作练习
//////// One package Chp11; import java.util.ArrayList; import java.util.List; public class TestList ...
理解zookeeper选举机制
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
Gulp自动构建Web前端程序
这两天在一个朋友在项目上碰到了一个这样的问题,在运营过程中,用户在浏览器上对某个表单进行数据提交时,需要引入新的平台接口数据的业务,通过评估,开发团队马上修改了相关后台代码和部分的前端脚本代码,通过简 ...
jquery和javascript的区别(常用方法比较)
jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单.人家怎么说的来着,jquery就是要用更少的代码,漂亮的完成更多的功能.JavaScript 与JQu ...
Linux系统（二）软件的安装与卸载
序言上一篇我们了解啦Linux系统中,根目录下的各个文件夹是做什么用的啦,也学会文件如何压缩打包.那么接下来我们就该用到这个系统啦.用这个系统,就是用这个系统的软件,那么我们对我们需要的软件如何安装 ...
java学习之路
先来说一说我和it之间的不解之缘.准确来说,我接触it是从大二是我买的第一个手机开始的(国产的,展讯平台,能够运行mrp虚拟机),那时候还没有智能手机,或者说还不够普及,总之就是买不起.一次偶然的机会 ...
[编织消息框架][rpc]使用篇
rpc 分两部份,一个是调用者,另一方是服务提供者调用者只关心那个服务,传相应参数,返回内容就可以而提供者根据调用相应服务同参数,工作处理后响应内容即可根据他们的关系可以用JAVA 接口同实现类 ...
计算机程序的思维逻辑 (70) - 原子变量和CAS
从本节开始,我们探讨Java并发工具包java.util.concurrent中的内容,本节先介绍最基本的原子变量及其背后的原理和思维. 原子变量什么是原子变量?为什么需要它们呢? 在理解synch ...
每天一个linux命令31)--chown命令
chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID,组可以使组名或者组ID:文件是以空格分开的要改变权限的文件列表,支持通配符.系统管理员经常使用chown命令,在将文件拷 ...

视频swiper轮播

视频swiper轮播的更多相关文章

随机推荐

热门专题