[英]HTML5 - Fire event every few seconds while video is playing
我想通过跟踪在不同时间间隔掉多少用户来跟踪视频的用户参与度。
为此,我需要在视频播放时每15秒触发一次跟踪事件。
playing
事件被触发一次。 我需要在视频的整个生命周期中都可以使用的东西。
var _video = $('video')[0],
timeoutID;
$(_video).on('playing', function(event){
timeoutID = window.setTimeout(function() {
console.log("video is playing");
}, 15000);
}).on('ended', function(event){
console.log("video eneded");
window.clearTimeout(timeoutID);
});
您可以改用timeupdate
事件,它会在视频的currentTime
变化时更新,换句话说,它会在视频播放时更新,并为您提供用户实际观看的视频量
var _video = $('video')[0];
$(_video).on('timeupdate', function() {
var hasPlayedTime = _video.currentTime;
});
var _video = $('video')[0]; $(_video).on('timeupdate', function(event){ var hasPlayedTime = _video.currentTime; $('#result').html('<strong>Elapsed : </strong>' + hasPlayedTime); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <video controls="" style="width:240px;height:180px;"> <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm;codecs="vp8, vorbis"" /> <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4;codecs="avc1.42E01E, mp4a.40.2"" /> </video> <span id="result" style="position:relative; top: -100px; left: 20px"></span>
为了仅每15秒对这样的事件进行操作,我们需要添加一些数学和逻辑
var _video = $('video')[0], debounce = true, seconds = 5; // set to 15 instead $(_video).on('timeupdate', function(event){ var hasPlayedTime = _video.currentTime; var intPlayedTime = parseInt(hasPlayedTime, 10); var isFifteen = intPlayedTime % seconds === 0 && intPlayedTime !== 0; if (isFifteen && debounce) { debounce = false; $('#result span').html(intPlayedTime); } else { setTimeout(function() { debounce = true; }, 1000); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" controls="controls"></script> <video controls="" style="width:240px;height:180px; position: relative; top: -20px; float:left"> <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm;codecs="vp8, vorbis"" /> <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4;codecs="avc1.42E01E, mp4a.40.2"" /> </video> <span id="result" style="position:relative; top: 70px; left: 20px"> <p><u>Updates every five seconds</u></p> <strong>Elapsed : </strong> <span>0</span> </span>
使用window.setInterval
而不是window.setTimeout
$(_video).on('playing', function(event){
timeoutID = window.setInterval(function() {
console.log("video is playing");
}, 15000);
}).on('ended', function(event){
console.log("video eneded");
window.clearInterval(timeoutID);
});
我做了这个
var lastSecond = null;
var secondsToCallFunction = 20;
$(_video).on('timeupdate', function(e) {
var seconds = Math.floor(e.target.currentTime);
if (seconds % secondsToCallFunction == 0 && lastSecond !== seconds) {
lastSecond = seconds
console.log(seconds);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.