html 5 视频跟踪百分比

Posted 2023-05-08

【中文标题】html 5 视频跟踪百分比

【英文标题】：html 5 video tracking with percentage

【发布时间】：2017-09-30 18:14:53

【问题描述】：

如何跟踪观看视频的状态

如果我在 60% 后这样写，我可以发送一个 ajax 调用并将状态更新为观看 60%

var i=0;
$("#video").bind("timeupdate", function()
var currentTime = this.currentTime;
if(currentTime > 0.66*(this.duration)) 
    if(i<1) 
        /* Watched 66% ajax call will be here*/
    
    i=i+1; //Reset for duplicates

);

同样。 如果我在 100% 之后这样写，我可以发送一个 ajax 调用并将状态更新为完全观看 100%

$("#video").bind("ended", function() 
    if(j<1) 
        /* Watched 100% Finished */  
    
    j=j+1; //Reset for duplicates
);

但是当有人将视频转发到 90% 并从那里开始播放时，也会触发 100% ajax 调用，那么在这种情况下我应该使用什么逻辑将状态更新为未观看。

【问题讨论】：

视频快进时是否会触发某种回调？这里的问题没什么好说的:)

@GarrettKadillak 如果快转没有回叫。我只想存储视频是否被完整观看。

是否可以在jsbin中重新创建场景？

【参考方案1】：

像这样操作函数怎么样

var watchPoints = [];

$("#video").bind("timeupdate", function()
var currentTime = this.currentTime;
var watchPoint = Math.floor((currentTime/this.duration) * 100);
if(watchPoints.indexOf(watchPoint) == -1)
  watchPoints.push(Math.floor(watchPoint))

);

/* Assuming that this will be called regardless of whether the user watches till the end point */
$("#video").bind("ended", function() 
   /* use the watchPoints array to do the analysis(ordered array)
   Eg.1 [1,2,3,4,5....100] - length is 100
      2.[90,91..100]  - length is only 10 and the starting point is 90
      3.[1,2,3,4,5,50,51,52,61,62,63,64,65,66,67,68,69,70,98,99,100] - length is 21 and the index of 66 is 13 which clearly tells the user has skipped most of the parts
   */
);

【参考方案2】：

通过研究和一点点努力，我得到了这样的解决方案：

我的 html 是这样的：

<div id="videoData">
<video  style="max-width: 60em;" autoplay="" controls="" class="center-block" id="video">
<source type="video/mp4" src="http://amerytech.net/lc_production/uploads/course_videos/Time Speed &amp; Distance/Time Speed &amp; Distance.mp4" le="max-width: 60em;" sty="">
</source>
</video>
</div>  
<p id="display">asdddddd</p>

我的 javascript 是这样的：

$(document).ajaxStop(function() 
        var video = document.querySelector('video'); 
        if (video) 
            video.addEventListener("loadedmetadata", function()  
                totalTime = this.duration;
            );
            $("#video").bind("timeupdate", function() 
                var currentTime = this.currentTime;
                var totalPlayed = 0;
                var played = video.played;
                for (var i = 0; i < played.length; i++) 
                    totalPlayed += played.end(i) - played.start(i);
                    console.log(totalPlayed);
                    $("#display").html(totalPlayed);
                
            ); 
             else  
            alert("not coming"); 
         
    );