H5页面中的视频轮播（类似于banner轮播图效果）

先说下我的需求，如下图：
手机模型中间部分是视频播放，当一条视频播放完毕后，整屏会自动上滑切换到下一个视频。

详细效果展示请在PC端点击：http://www.17jianyue.cn/ 查看

提起轮播，我们看到的最多的就是banner轮播图，而提起轮播图，我会马上想起用Swiper。
一开始为了快速开发，就想着用swiper来实现切换视频的轮播效果，但是尝试后发现两个严重的问题：
1、使用Swiper实现轮播时，所设定的轮播时间间隔是固定的值，而视频播放时间长短不同，因此视频轮播是根据视频时长而定的。
2、如果使用swiper，强制设定固定时间间隔来切换播放，这样会导致视频列表中的视频会同时播放。换言之，就是刚进入页面后，虽然页面上显示的是第一条视频在播放，但后台其实是所有视频都在同时加载播放。
因此，swiper可以不用再考虑。

下面进入重点：

视频播放时，何时才能切换下一条？当视频播放完毕时。因此需要用到ended()事件来监控是否播放完毕。
轮播时要实现无缝轮播效果。

代码重点展示js部分：

html:

   <div class="video_list"><div class="video_ls"></div></div>

js:

var cdnUrl = '';  //资源url//视频列表数据，三个视频
var videoList = [{resid:'j1q9vb170b2769761317e270eccdfe778e0b46df.mp4',user_img:'user_xx.png',dialog_img:'dialog_xx.png',topic_img:'topic_xx.png'},{resid:'j1yvqkg00b2769761317e270eccdfe778e0b46df.mp4',user_img:'user_xyj.png',dialog_img:'dialog_xyj.png',topic_img:'topic_xyj.png'},{resid:'j2037nea006c4c1b8a8ac173362ee25ee7ec24c4.mp4',user_img:'user_3.png',dialog_img:'dialog_3.png',topic_img:'topic_3.png'},              ];  var leg = videoList.length;   $(document).ready(function(){//加载视频列表var str='';for(var i=0;i<leg;i++){loadvideo(videoList[i],i);  }//实现无缝滚动var clone = $(".video_ls .video_shows").first().clone(true);//克隆第一个视频$(".video_ls").append(clone);//复制到列表最后var size = $('.video_shows').length;//视频高度var _height = $('.video_shows').outerHeight();//初始化播放第一条var video_show = $('.video_shows');var video = $('.video_shows video');       video[0].load();     video[0].play(); var num =0;  //当前播放视频的下标playlist(video);function playlist(video){//监控当前视频是否播放完毕video[num].onended = function(){//console.log("第"+(num+1)+"条视频播放完毕")num++;              if(num<video.length){var _top = -_height*(num)+'px';$('.video_ls').animate({'top':_top},'1500')                            }else{num=1;$(".video_ls").css('top','0');$('.video_ls').animate({'top':-_height},'1500')                            }video[num].load();     video[num].play(); return playlist(video); }               }           })//加载视频播放界面
function loadvideo(videodta,i){str = '';str += '<div class="video_shows">';str += '<div class="userInfo"><img src="data:image/'+videodta.user_img+'"/></div>';              str += '<div class="dialog"><img src="data:image/'+videodta.dialog_img+'"/></div>';str += '<div class="more"></div>';str += '<div class="topic_content"><img src="data:image/'+videodta.topic_img+'"/></div>';str += '<div class="phone_btm"></div>';str += '<video id="myvideo'+(i+1)+'" class="video-js vjs-big-play-centered"  poster="'+cdnUrl+videodta.resid+'?vframe/jpg/offset/0"   preload="auto">';str += '<source src="'+cdnUrl+videodta.resid+'" type="video/mp4">';str += '</video>';str += '</div>';$(".video_ls").append(str);
}

H5页面中的视频轮播（类似于banner轮播图效果）相关推荐

在app和h5页面中播放视频监控
本文章向大家介绍app和h5播放实时视频监控. 我是把我们公司的小程序做成app但是在播放视频监控这一块出现了问题,app和h5页面不支持live-player(小程序原生标签)后台报错组件注册失败, ...
应用之星教你如何在H5页面中加入视频？
众所周知,H5页面在朋友圈非常火爆,那么如何让你的H5页面更吸引人关注,那就要多花点小心思了,比如在H5页面加入视频,让H5页面更生动更活力,本文聚焦于基于微信传播的H5页面的视觉设计,教大家如何通过 ...
在matlab中怎么录制音频_怎么录制淘宝页面中的视频？简单方法，轻松搞定
原标题:怎么录制淘宝页面中的视频?简单方法,轻松搞定怎么录制淘宝页面中的视频?当前足不出户,大家就可以在很多的电商平台购买到自己心仪的商品.这其中商机也就产生了,如果不太想上班,或者说想要自己当老板 ...
h5页面保存img_如何设计H5编辑器中的模版库并实现自动生成封面图
往期精选 H5编辑器的图片上传和图片库设计方案如何实现H5编辑器的实时预览和真机扫码预览功能在线IDE开发入门之从零实现一个在线代码编辑器基于React+Koa实现一个h5页面可视化编辑器-Do ...
H5 -- 微信h5页面中下载第三方app的方法
需求:在微信h5页面中下载第三方app -- 安卓, 直接下载apk文件包:iphone,跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX ...
陪玩系统源码开发，H5页面中调用支付功能的实现
最近在陪玩系统源码开发工作中,有个H5页面需要实现微信支付和支付宝支付的功能,现在已经完成,抽个时间写出来,分享给有需要的人. 第一步:先判断当前环境判断陪玩系统源码中用户所属环境,根据环境不同,执 ...
在H5页面中禁止微信分享转发按钮-mugeda
在H5页面中禁止微信分享转发按钮(mugeda) 在页面脚本中插入以下代码方法一: 加一段js代码 document.addEventListener('WeixinJSBridgeReady', ...
在H5页面中禁止微信分享转发按钮
在H5页面中禁止微信分享转发按钮(mugeda) 在页面脚本中插入以下代码方法一: 加一段js代码 document.addEventListener('WeixinJSBridgeReady', ...
iOS html5 键盘小数点,在移动端内嵌H5页面中数字框调用数字键盘，且只允许输入0-9和小数点的总结...
最初是想要在H5页面中输入数字的时候调起数字键盘,且只能输入数字和小数点,并且小数点后最多保留两位小数实践证明: 1.input: type = 'number'时, 当输入的为非法数字例如包括- ...

H5页面中的视频轮播（类似于banner轮播图效果）

下面进入重点：

H5页面中的视频轮播（类似于banner轮播图效果）相关推荐

最新文章

热门文章