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

原创 2017年05月12日 12:27:20

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

效果图

详细效果展示请在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="image/'+videodta.user_img+'"/></div>';              
   str += '<div class="dialog"><img src="image/'+videodta.dialog_img+'"/></div>';
   str += '<div class="more"></div>';
   str += '<div class="topic_content"><img src="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);
}



版权声明:本文为博主原创文章,未经博主允许不得转载。

实现视频+图片轮播

Adapter: package com.example.administrator.gymscreen.adapter; import 钱柜娱乐开户.content.Context; im...
  • m0_38025602
  • m0_38025602
  • 2017年09月12日 10:41
  • 437

js获取video的暂停、播放事件,并切换清晰度

1、video是H5新增的视频标签,在项目上用的最多的功能就是: (1)暂停的时候显示广告图片(图片有跳转链接)       (2)切换清晰度后,视频按切换前播放时间继续自动播放(或者暂停播放) ...
  • Take_Dream_as_Horse
  • Take_Dream_as_Horse
  • 2016年12月01日 16:05
  • 20767

图片和视频混合广告栏轮播实现

现在很多APP都有自己的广告轮播导航栏特效,这篇文章我将带大家实现非传统的图片轮播特效,要求实现图片和视频轮播特效,当轮播到视频时停止轮播,播放视频。视频播放完后如果遇到下一个是图片就正常轮播,反之则...
  • FuRen_Xie
  • FuRen_Xie
  • 2016年11月14日 16:49
  • 347

使用ViewPager来加载图片和轮播视频

使用ViewPager来加载图片和轮播视频 作为钱柜娱乐开户基础组件之一,大家对viewpager已经很熟悉了,网上也有很多使用viewpager来加载图片的案例。但是像微信那样点击图片,可以轮播...
  • nalanrumeng1113
  • nalanrumeng1113
  • 2017年03月12日 00:24
  • 670

js特效之腾讯视频的图片轮播

今天搞了一天的javascript,准备做一个特效图片轮播,现在晚上十二点,中午十二点我开始搞的,到了现在还没有搞好还差一个鼠标移进移出的暂定和播放,其实这是一个很简单的特效,就是从刚开始的css的布...
  • woshinannan741
  • woshinannan741
  • 2015年05月05日 17:45
  • 2123

钱柜娱乐开户实现Banner轮播效果

一、动态布局 纯粹为了保持代码风格的一致性,也可以用xml布局来实现。 private View createBannerView() { LinearLayout bannerLayout =...
  • ecjtuhq
  • ecjtuhq
  • 2017年02月08日 23:25
  • 1191

简单三步实现banner的轮播效果

目前有很多人使用Axure做轮播效果,步骤略复杂了些。这里,抛开其他设计原型不说,只说说banner图片轮播,三步教你实现轮播效果,我用的原型图软件是Mockplus。 把图片准备好,要开始了。...
  • jongde1
  • jongde1
  • 2016年06月23日 11:17
  • 1227

jQuery实现轮播效果(一) - 基础

前戏:          XXXX年XX月XX日,经理交给我一个网站新闻资讯网页开发的活儿,我一个java程序员,怎么完成得了网页设计这样高端的活儿呢!之前虽然有学过一点HTML,CSS的知识,但是...
  • qq791967024
  • qq791967024
  • 2015年08月12日 11:16
  • 5057

钱柜娱乐开户 视频和图片切换并进行自动轮播

刚入钱柜娱乐开户没多久,遇到的比较郁闷的问题就是子线程主线程的问题,更改UI界面,本想做一个图片的轮播但是比较简单,然后就试试实现视频跟图片切换播放进行不停的循环播放。也用过不少控件,但是知其然不知...
  • w171066813
  • w171066813
  • 2017年07月27日 13:34
  • 1707

使用BannerView做无限轮播

之前在做无限轮播的时候一直在使用ViewPager可能是我比较守旧的缘故吧,一直到这几天又要实现此项功能了,听朋友说BannerView特别好用并且是真正意义上的无限轮播,再也不是之前的Integer...
  • zhourui_1021
  • zhourui_1021
  • 2017年02月10日 16:14
  • 211
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:H5页面中的视频轮播(类似于banner轮播图效果)
举报原因:
原因补充:

(最多只允许输入30个字)