弹出层播放视频

<div class="modal" >
        <div class="modal-container" >
            <div class="video-panel">
                <video id="video" loop>
                    <source src="aa.mp4" >
                    </video>
                </div>
                <div class="video-footer">
                    <h1>
                        <!-- 「SINOSTAGE舞邦」Apple 编舞创意视频 我和我的祖国 -->
                    </h1>

                </div>
                <div class="video_paging">
                    <div class="paging_tools">
                        <span class="prev"> ◀    上一页</span>
                        <span class="close"></span>
                        <span class="next">下一页   ▶ </span>
                    </div>
                </div>
            </div>
        </div>
        <script >
          
              $(".acti").attr("onclick","");
                // 关闭按钮
                var num
                $(".close").click(function () {
                    $(".modal").hide(10)
                    document.getElementById("video").pause();
                })
               // 播放逻辑
               $(".a").click(function (index) {
                // console.log($(this).find(".span").text())
                num=$(this).index()
                 console.log(num)
                $(".modal").show()
                var dizhi=$(this).find(".span").text()
                var dizhitit=$(this).find(".aa").text()
                 $(".video-footer h1").text(dizhitit)
                $("video").attr("src",dizhi)    
                $("video").attr("data",num+1) 
               document.getElementById("video").play();      

              })
              // 下一个
              $(".next").click(function () {
                index=parseInt( $("video").attr("data"))+1  
                    $("video").attr("data",index)   
                next=$(".a:eq("+index+")").find(".span").text()
                nexttitle=$(".a:eq("+index+")").find(".aa").text()
                console.log(index)
                $(".video-footer h1").text(nexttitle)
                $("video").attr("src",next) 
                 document.getElementById("video").play();
                 if (index>$(".a").length-2) {
                    $(this).hide()
                  
                 }  
               $(".prev").show()
             })
               // 上一个
              $(".prev").click(function () {
                index=parseInt( $("video").attr("data"))-1                  
                    $("video").attr("data",index)                
                prev=$(".a:eq("+index+")").find(".span").text()
                prevtitle=$(".a:eq("+index+")").find(".aa").text()
               console.log(index)
                  $(".video-footer h1").text(prevtitle)
                $("video").attr("src",prev) 
                 document.getElementById("video").play();   
                if (index<2) {           
                    $(this).hide()
                   
                }
                 $(".next").show()
                 
             })
             
        </script>　　

首先有一个none的 弹出层
当用户点击 图片 弹出层出来>>获取图片的index(),拿到关于这个图片的标题，和视频地址
然后让视频play（）

当点击下一个  idnex+1 赋值给 标题 和视频地址 play（），pause（）
上一个也是

当index>长度的时候  结束none
<0  隐藏