h5視頻播放插件

<style>
 .js-pop {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10000;
            width: 100%;
            height: 100%;}
        .js-pop .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.5;
        }
        .js-pop .pop-wrap {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            min-height: 1rem;
            /*right: 0;*/
            /*top: 0;*/
            /*bottom: 0;*/
            margin: -0.5rem auto 0;
            transition:all .3s ;
        }
        .js-pop video {
            display: block;
            background-color: rgb(51, 51, 51);
            border: 3px solid black;
            width: 96%;
            margin:0 auto;
            transition:all .3s ;
        }
</style> 

<a href="javascript:void(0)" class="js-video" data-src="http://download.m.37.com/video/game/awlzw/zhuxuandingzhi.mp4"></a>

<div class="js-pop" id="popVideo">
    <div class="mask"></div>
    <div class="pop-wrap">
        <a href="javascript:;" class="close"></a>
        <div class="content">
            <video src="" controls="controls"   autoplay="autoplay" playsinline x5-video-player-type="h5" >
                您的瀏覽器不支持 video 標籤。
            </video>
        </div>
    </div>
</div>
<script>
    var pop  = {
        pop:function(wrap,mask,option){
            var opt = {
                closeCall:null
            };
            opt=$.extend(opt,option);
            this.wrap = wrap ;
            this.mask = mask;

            function open(){
                wrap.show();
                mask.show();
            }
            function close(callback){
                wrap.hide();
                mask.hide();
                document.getElementsByTagName("video")[0].setAttribute("src","");
                callback&&callback()
            }
            function events(){
                wrap.on("click",".close,.mask",function(){
                    close(opt.closeCall);
                });
                wrap.on("click",".pop-wrap",function(e){
                    e.stopPropagation();
                })
            }
            this.open = open;
            this.close = close;
            events();
        },
        maskPop:function(wrap,option){
            var opt = {
                closeCall:null
            };
            opt=$.extend(opt,option);
            $.extend(this,new pop.pop(wrap,wrap.find(".mask"),opt));
        }
    };
    function media(){
        var wrap = $(".video");
        var videoItems = wrap.find(".js-video");
        var popVideo = new pop.maskPop($("#popVideo"));
        popVideo.setSrc = function(src){
            this.wrap.find("video").attr("src",src)
        };
        var videoEle =  $("#popVideo").find("video");
        videoEle[0].addEventListener("progress",function(e){
            if(videoEle[0].readyState == 4){
                videoEle.css({
                    "marginTop":-videoEle.height()/2-6
                })
            }
        });
        videoItems.on("click",function(){
            popVideo.setSrc($(this).data("src"));
            popVideo.open();
        });
    }
    media();
</script>