视频轮播修改

about.html

@@ -319,19 +319,23 @@
                     <ul class="video_box clear" id="videoBox">
                         <li>
                             <video class="video_one" src="https://qjvideo.oss-cn-beijing.aliyuncs.com/1.%E9%BA%BB%E9%9B%80%20%E6%9C%80%E7%BB%88%E9%85%8D%E9%9F%B3%E7%89%88_x264.mp4"
-                                poster="./images/short_cut2.jpg" controls></video>
+                                poster="./images/short_cut2.jpg"></video>
+                                <div class="switch"></div>
                         </li>
                         <li>
                             <video class="video_two" src="https://qjvideo.oss-cn-beijing.aliyuncs.com/%E5%9B%9E%E5%AE%B6%E6%8E%A2%E4%BA%B2_x264.mp4" poster="./images/short_cut4.jpg"
-                                controls></video>
+                                ></video>
+                            <div class="switch"></div>
                         </li>
                         <li>
                             <video class="video_there" src="https://qjvideo.oss-cn-beijing.aliyuncs.com/%E7%AC%AC%E4%B8%80%E9%AB%98%E5%B3%B0.mp4" poster="./images/short_cut1.jpg"
-                                controls></video>
+                                ></video>
+                                <div class="switch"></div>
                         </li>
                         <li>
                             <video class="video_four" src="https://qjvideo.oss-cn-beijing.aliyuncs.com/4.%E4%BA%BA%E6%9C%89%E5%85%B6%E5%B1%85.mp4" poster="./images/short_cut3.jpg"
-                                controls></video>
+                                ></video>
+                                <div class="switch"></div>
                         </li>
                     </ul>
                 </div>

css/about.css

@@ -370,7 +370,18 @@ header {
     height:100%;
     margin-right:25px;
     float:left;
+    position: relative;
 }
+#video_banner .box_show li .switch{
+    position: absolute;
+    top: 90px;
+    left: 200px;
+    width: 62px;
+    height: 62px;
+    border-radius: 50%;
+    background: url(../images/switch.jpg);
+    z-index: 100;
+    }
 #video_banner .box_show li video{
     object-fit: fill;
     width:100%;

js/about.js

@@ -68,18 +68,43 @@ window.onload = function () {
         },14);
     }
     autoPlay();
-    $("#videoBox li").bind("click","vodio",function(){
-        this.getElementsByTagName("video")[0].play();
+    //点击停掉其他播放事件
+    $("#videoBox li video").controls=false;
+    var sss=$("#videoBox li video");
+    function aa(){
+        for(var i=0;i<sss.length;i++){
+            if(sss[i].paused===true){
+            }else{
+                clearInterval(timer);
+                return ;
+            }
+        } 
+    }
+    var aaa = true;
+    $("#videoBox li").bind("click","video",function(){  
+        $(this).children(".switch").css("background-image","url(images/switch1.jpg)")
+        $(this).children(".switch").fadeOut(500)
+        let url = this.getElementsByTagName("video")[0]
+        if(aaa == true){
+            aaa = false;
+            url.play();
             $(this).siblings("li").each(function(i,el){
                 el.children[0].pause();
                 clearInterval(timer);
             })
+        }else{
+            aaa = true;
+            $("#videoBox li .switch").css("background-image","url(images/switch.jpg)")
+            $("#videoBox li .switch").fadeIn()
+            url.pause()
+        }
     })
     video_box.onmouseover=function(){
         clearInterval(timer);
     }; 
     video_box.onmouseout=function(){
         autoPlay();
+        aa();
     }
     window.onscroll = function(){
         show_scroll()