<!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>