<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .v_box{
        width: 100%;
        height: auto;
    }
    .v_box .v_ul li{
        position: relative;
    }
    .v_box .v_btn{
        width: 100%;
        height: 100%;
        background: #ccc;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
    }
    .v_box .v_btn1{
        display: none;
    }
    .v_box .v_btn2{
        display: none;
    }
    .v_block{
        display: block!important;
    }
</style>
<body>
<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>
<div class="v_box">

    <ul class="v_ul">
        <li>
            <video src="mp4/2.mp4" class="videos" title="1" poster="images/bg2.jpg" width="100%" height="600" controls autobuffer></video>
            <div class="v_btn v_btn1">

            </div>
        </li>
       <!-- <li>
            <video src="mp4/2.mp4" class="videos" title="1" poster="images/bg2.jpg" width="100%" height="600" controls autobuffer></video>
            <div class="v_btn v_btn2">

            </div>
        </li>-->
    </ul>
</div>

<div id="d1" style="width: 100%;height: 300px;border: 1px solid red;">
    <div id="d2" style="background: #aaa000;display: none;width: 300px;height: 300px;position: relative;z-index: 999;">

    </div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $('.v_ul li').click(function () {
            if ($(this).children("video").hasClass('pause')) {
                $(this).children("video").trigger("play");
                $(this).children("video").removeClass('pause');
                $(this).children("video").addClass('play');
            } else {
                $(this).children("video").trigger("pause");
                $(this).children("video").removeClass('play');
                $(this).children("video").addClass('pause');
            }
        })

        $('.videos').bind('play', function () {
            console.log("正在播放视频");
            var v=$(this);
            var t=$(this).next();
            setTimeout(function(){
                t.addClass("v_block");
                v.trigger("pause");
               /* v.removeClass('play');*/
                /*t.css({"display":"block"});*/
            }, 3000);
        });

        $("#d1").click(function () {
            setTimeout(function(){
                $("#d2").css({"display":"block"});
            }, 3000);
        });

    });

</script>

</body>
</html>

我想实现 视频在播放到3秒后暂停 div(v_btn)显示，在电脑上没问题 但传到服务器
手机打开 视频播放到三秒后暂停 但是 下面div没显示 怎么回事 找了半天没找到原因 求指点？谢谢

http://www.yulijie.top/mp4/e.... 这是传到服务器的连接