HTML 5視頻與百分比

如何跟蹤視頻的狀態跟蹤觀看或不HTML 5視頻與百分比

如果我寫這樣的後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調用將會觸發，所以在這種情況下，我應該使用什麼邏輯來更新狀態以不被監視。

來源

2017-05-03 Mr world wide

當視頻快速轉發時，是否存在某種回調？沒有太多的問題在這裏:) –

@GarrettKadillak如果快速轉發沒有回叫在那裏。我只是想存儲視頻是否被完全觀看。 –

是否有可能在jsbin中重新創建場景？ –

如何操作的功能這樣

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 
 
    */ 
 
});

來源

2017-05-03 05:07:57

隨着研究和小小的努力，我得到了這樣的解決方案：

我的HTML是這樣的：

<div id="videoData"> 
<video width="75%" 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"); 
     } 
    });

來源

2017-05-03 11:11:33

HTML 5視頻與百分比

回答

相關問題