HTML5 -视频播放时每隔几秒触发一次事件

HTML5 - Fire event every few seconds while video is playing

本文关键字：几秒 事件 一次 播放 视频 HTML5      更新时间：2023-09-26

我想跟踪一个视频的用户粘性，通过跟踪在不同的时间间隔有多少用户流失。

为此，我需要在视频播放时每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=&quot;vp8, vorbis&quot;" />
    <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" />
</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=&quot;vp8, vorbis&quot;" />
    <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" />
</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);
}
});
相关文章：