视频观看时间统计 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <link href="//cdn.bootcss.com/video.js/7.0.0-alpha.1/alt/video-js-cdn.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/video.js/7.0.0-alpha.1/video.min.js"></script>

</head>
<body>
    <video id="demovideo" class="video-js vjs-tech" controls data-setup="{}" width="960" height="400"
           src="http://xxx.mp4" >
    </video>
    <input type="text" id="aa" value="0"> {{--观看时长--}}

<!--    <script src="video.min.js"></script>-->


</body>
</html>

<script>

$(document).ready(function () {
    var options = {
    };
    var player = videojs('demovideo', options, function onPlayerReady() {
        var time1;
        var t1 = 0;
        function aa() {
            t1 += 0.25;
            document.getElementById('aa').value = t1;
            console.log('aa-' + t1);
        }
        //开始播放视频时，设置一个定时器，每250毫秒调用一次aa(),观看时长加2.5
        this.on('play', function () {
            console.log('开始播放');
            time1 = setInterval(function () {
                aa();
            }, 250)
        });
        //结束和暂时时清除定时器，并向后台发送数据
        this.on('ended', function () {
            console.log('结束播放');
            window.clearInterval(time1);
            countTime();   //向后台发数据
        });
        this.on('pause', function () {
            console.log('暂停播放');
            window.clearInterval(time1);
            countTime();  //向后台发数据
        });
    });
    //直接关闭页面，并向后台发送数据
    if(window.addEventListener){
        window.addEventListener("beforeunload",countTime,false);
    }else{
        window.attachEvent("onbeforeunload",countTime);
    }
})

function countTime() {
            var sTime = $("#aa").val();
            $.ajax({
                url : "url",
                type : "POST",
                dataType : 'json',
                data : {'sTime':sTime,'_token':"{{ csrf_token() }}"},
                success:function (data) {
                    console.log(data);
                }
            })
        }

</script>
posted @ 2021-02-20 17:27  该显示昵称已被使用了  阅读(242)  评论(0)    收藏  举报