jsPC端video无限循环播放，移动端video可实现左右滑动切换播放

最新推荐文章于 2023-06-05 17:12:25 发布
b286588411
最新推荐文章于 2023-06-05 17:12:25 发布
阅读量795
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/webwrangler/p/8944605.html
版权
  1 (c) Copyright 2018 Web牧马人. All Rights Reserved. 
  2 <!DOCTYPE html>
  3 <html lang="zh">
  4 <head>
  5     <meta charset="UTF-8" />
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8     <title>PC端video无限循环播放，移动端video可实现左右滑动切换播放</title>
  9     <style type="text/css">
 10         *{
 11             margin: 0;
 12             padding: 0;
 13         }
 14         li{
 15             list-style: none;
 16         }
 17         html,body{
 18             width: 100%;
 19             height: 100%;
 20         }
 21         .wrap{
 22             height: 100%;
 23         }
 24         .videoBox{
 25             height: 100%;
 26             position: relative;
 27         }
 28         .videoBox ul{
 29             width: 100%;
 30             height: 100%;
 31             position: relative;
 32             position: absolute;
 33             top: 0;
 34             left: 0;
 35         }
 36         .videoBox ul li{
 37             width: 100%;
 38             height: 100%;    
 39             position: relative;
 40             position: absolute;
 41             top: 0;
 42             left: 0;
 43             text-align: center;
 44             display: none;
 45         }
 46         .videoBox ul li.active{
 47             display: block;
 48         }
 49         .videoBox ul li video{
 50             width: 100%;
 51             position: absolute;
 52             bottom: 0;
 53             right: 0;
 54             margin: auto;
 55         }
 56     </style>
 57 </head>
 58 <body>
 59     <div class="wrap">
 60         <div class="videoBox">
 61             <ul></ul>
 62         </div>
 63     </div>
 64     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 65     <script type="text/javascript">
 66         $(function(){
 67             var myVideoArray = ['vedio/1.mp4','vedio/1.mp4','vedio/1.mp4']
 68             var myVideoArray_len = myVideoArray.length;
 69             var videoBox_ul_Dom = $('.videoBox ul');
 70             for(var i=0 ; i<myVideoArray.length ; i++ ){
 71                 var cont = ''
 72                 if(i == 0){
 73                     cont += '<li class="active">';
 74                 }else{
 75                     cont += '<li>';
 76                 }
 77                 cont += '<video src="'+ myVideoArray[i] + '" id="myVideo'+ i +'"></video>';
 78                 cont +='</li>';
 79                 videoBox_ul_Dom.append(cont);
 80             }
 81             var myVideo_list = $('.videoBox ul li video');
 82             for(var j=0 ; j<myVideo_list.length;j++){
 83                 myVideo_list[j].load();
 84             }
 85             myVideo_list[0].play(); //初始化第一个播放节点
 86             //监听video循环播放
 87             $.each(myVideo_list, function(index,value) {
 88                 var _this = $(this).get(0);
 89                 _this.addEventListener('touchstart',touchs,false);
 90                 _this.addEventListener('touchmove',touchs,false);
 91                 _this.addEventListener('touchend',touchs,false);
 92                 _this.addEventListener('ended', function(){
 93                     var index_num = index;
 94                     if(index < myVideoArray_len-1){
 95                         index_num++;
 96                         myVideo_list[index_num].play();
 97                         $('.videoBox ul li').eq(index_num).addClass('active').siblings('li').removeClass('active');
 98                     }else{
 99                         myVideo_list[0].play();
100                         $('.videoBox ul li').eq(0).addClass('active').siblings('li').removeClass('active');
101                     }
102                 });
103             });
104             //定义变量，用于记录坐标
105             var startx,movex,endx,nx;
106             //开始触摸函数，event为触摸对象
107             function touchs(event){
108                 event = event ? event : window.event;  
109                 var obj = event.srcElement ? event.srcElement : event.target;
110                 event.preventDefault();//阻止浏览器默认滚动事件
111                 if(event.type=="touchstart"){//通过if语句判断event.type执行了哪个触摸事件
112                     var touch = event.touches[0];//获取开始的位置数组的第一个触摸位置
113                     startx = Math.floor(touch.pageX);//获取第一个坐标的X轴
114                 }else if(event.type=="touchmove"){//触摸中的坐标获取
115                     var touch = event.touches[0];
116                     movex = Math.floor(touch.pageX);
117                 }else if(event.type == "touchend" || event.type == "touchcancel"){//当手指离开屏幕或系统取消触摸事件的时候
118                     endx = Math.floor(event.changedTouches[0].pageX);//获取最后的坐标位置
119                     $.each(myVideo_list, function(index,value) {
120                         var _this = $(this).get(0);
121                         nx = endx-startx;//获取开始位置和离开位置的距离
122                         //判断触发节点和当前节点是否相同
123                         if(obj == _this){
124                             var index_num = index;
125                             //判断滑动方向
126                             if(nx > 0){//右滑动
127                                 //当前滑动对象下表不为0
128                                 if(index > 0){
129                                     index_num--;
130                                     myVideo_list[index].pause();
131                                     myVideo_list[index_num].play();
132                                     $('.videoBox ul li').eq(index_num).addClass('active').siblings('li').removeClass('active');
133                                 }else{
134                                     myVideo_list[myVideoArray_len-1].play();
135                                     myVideo_list[index].pause();
136                                     $('.videoBox ul li').eq(myVideoArray_len-1).addClass('active').siblings('li').removeClass('active');
137                                 }
138                                 return false;
139                             }else{//左滑动
140                                 //当前滑动对象是最后一个对象
141                                 if(index < myVideoArray_len-1){
142                                     index_num++;
143                                     myVideo_list[index_num].play();
144                                     myVideo_list[index].pause();
145                                     $('.videoBox ul li').eq(index_num).addClass('active').siblings('li').removeClass('active');
146                                 }else{
147                                     myVideo_list[0].play();
148                                     myVideo_list[index].pause();
149                                     $('.videoBox ul li').eq(0).addClass('active').siblings('li').removeClass('active');
150                                 }
151                                 return false;
152                             }
153                         }
154                     });
155                 }
156             }
157         })
158     </script>
159 </body>
160 </html>