美文网首页我爱编程
关闭bootstrap弹出层同时关闭video

关闭bootstrap弹出层同时关闭video

作者: null_su | 来源:发表于2018-02-10 23:02 被阅读0次

    描述:
    利用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/esghtftx.html