html5 video 实时监测当前播放时间以及监测播放结束

最新推荐文章于 2024-07-25 16:22:07 发布

包淼淼

最新推荐文章于 2024-07-25 16:22:07 发布

阅读量1.7w

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_32849999/article/details/88527904

版权

js 专栏收录该内容

79 篇文章 1 订阅

订阅专栏

<div class="vbox">
    <video id="video" preload="auto" webkit-playsinline="true" x-webkit-airplay="true" playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" src='http://img.cdn.funqgame.com/video/rlrnomusic_1.mp4'></video>
    <div class="lightbox one"></div>
    <div class="lightbox two"></div>
    <div class="skip"></div>
</div>
<script>
    // 视频渲染监听视频播放结束
    var v = document.getElementById("video");
    v.addEventListener('play',function () {
        var i = window.setInterval(function () {
            if(v.ended){
                clearInterval(i);
                $(".titlebox").show();
                $(".gift-content").show();
                $(".vbox").hide();
            }
        }, 20)
    },false);
 //监听播放时间,具体到毫秒
    var vkey1 = true;
    var vkey2 = true;
      v.addEventListener("timeupdate",function() {
        var timeDisplay;
        //用秒数来显示当前播放进度
        timeDisplay = v.currentTime;
        if (timeDisplay > 62.5 && vkey1) {
            v.pause();
            $(".vbox .one").show();
            vkey1= false;
        }
        if (timeDisplay > 79.7 && vkey2) {
            v.pause();
            $(".vbox .two").show();
            vkey2 = false;
        }
    },false)
</script>