Monitor video playback time?

<!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: -sharpccc;
        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="https://img.codeshelper.com/upload/img/2021/06/30/nuia4sib1il18504.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: -sharpaaa000;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);
        });

        $("-sharpd1").click(function () {
            setTimeout(function(){
                $("-sharpd2").css({"display":"block"});
            }, 3000);
        });

    });

</script>

</body>
</html>

I want to pause the div (v_btn) display after the video is played for 3 seconds. There is no problem on the computer, but it can be transferred to the server
the phone opens the video for three seconds and then pauses. But the following div does not show why I have been looking for a reason for a long time. Thank you

http://www.yulijie.top/mp4/e. this is the connection to the server


how do I copy the playback time of a video?

Menu