h5视频

Posted 2020-10-16 hawtree

<style>
.js-pop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.5;
}
.pop-wrap {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    min-height: 1rem;
    margin: -0.5rem auto 0;
    transition: all .3s;
}
.close{
    width: .6rem;
    height: .6rem;
    background-image: url(http://img.37wan.cn/huodong/yhjy-oppo-20170612/images/close.png?t=20170612081349581);
    background-size: 100%;
    position: absolute;
    z-index: 1000;
    left: 50%;
    top: -1.7rem;
    margin-left: 2.45rem;
}
.content{overflow: hidden;
    width: 6.4rem;
    height: 4.05rem;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}
video {
    display: block;
    background-color: rgb(51, 51, 51);
    border: 3px solid black;
    width: 96%;
    margin: 0 auto;
}</style>
<div id="popVideo" class="js-pop" style="display: none;">
<div class="mask">&nbsp;</div>
<div class="pop-wrap">
<div class="content" style="margin-top: -1.05rem;"><video id="js-video" width="320" height="240" src="http://download.m.37.com/video/game/gymc/huaweiorder.mp4" controls="controls" preload="auto"><object id="js-video" width="320" height="240" data="https://common.cnblogs.com/editor/tiny_mce/plugins/media/moxieplayer.swf" type="application/x-shockwave-flash"><param name="src" value="https://common.cnblogs.com/editor/tiny_mce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=http%3A//download.m.37.com/video/game/gymc/huaweiorder.mp4&amp;poster=/" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /></object> 您的浏览器不支持 video 标签。 </video></div>
</div>
</div>

<script type="text/javascript">// <![CDATA[
    $(function () {
        $(".js-pop").on("touchmove", function (e) {
            e.preventDefault();
            e.stopPropagation();
        });
        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.getElementById("js-video").currentTime = 0;
                    document.getElementById("js-video").pause();
                    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 videoItems = $(".jspop1");
            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.parents(".pop-wrap").css({
//                        "marginTop": -videoEle.height() / 2
//                    })
//                }
//            });
            videoItems.on("click", function () {
//                popVideo.setSrc($(this).data("src"));
                document.getElementById("js-video").currentTime = 0;
                document.getElementById("js-video").play();
                popVideo.open();
            })
        }

        media();
    });
</script>