美文网首页
关闭bootstrap弹出层同时关闭video

关闭bootstrap弹出层同时关闭video

作者: null_su | 来源:发表于2017-09-01 10:36 被阅读0次

    关闭bootstrap弹出层同时关闭video

    利用bootstrap modal组件制作弹窗视频,会有个问题,关闭modal框后,视频还是继续播放的,modal和视频是相互独立的,需要单独关闭:

    • video内预先不放链接,点击播放按钮加载视频链接,点击关闭按钮后同时移除src中的视频链接,如下:

        $("[data-toggle='modal']").click(function(){  //modal弹窗按钮
            $("#video").attr("src","http://overwatch.nos.netease.com/1/assets/img/pages/home/anniversary/header.mp4");
        })
            
        $(".close").click(function(){ //modal关闭按钮
                $("#video").removeAttr("src"); //移除视频链接
        })
      
    • 利用video原生方法pause();(关闭弹窗的时候暂停视频,注意这不是jquery方法)

        $(".close").click(function(){  
            document.getElementById('video').pause(); //利用js获取id
            
        })

    相关文章

      网友评论

          本文标题:关闭bootstrap弹出层同时关闭video

          本文链接:https://www.haomeiwen.com/subject/haphjxtx.html