Youtube iframe javascript,跟踪观看视频的百分比?
Youtube iframe javascript, track percentage of video watched?
我正在尝试准确计算用户观看视频的时间。他们观看的时间不应包括快进或暂停的时间。我现在拥有的代码每次都给我不同的百分比(我使用的是间隔)。我不知道还有什么办法可以解决这个问题?
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
clicked_video = true;
arr.length = (player.getDuration()-1).toFixed(0);
done = true;
}if(event.data === YT.PlayerState.PLAYING){
id = setInterval(check, 1000);
}if(event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.BUFFERING){
clearInterval(id);
var percent = 0;
for(var i=0;i<arr.length;i++){
if(arr[i] == "x"){
percent++;
console.log(percent);
}
}
percent = (percent / arr.length) * 100;
alert(percent + "%");
}
}
function check(){
arr[Math.floor(player.getCurrentTime())] = "x";
}
这是一个演示,我认为变量和函数的名称足够明确,可以理解所有内容,但是如果您有任何疑问或问题,请继续提问。
我必须提到的一件事是它不会准确。如果您的间隔每秒执行一次并且用户在一秒钟中间跳过了一部分,则该部分可能不会被计算在内。为了更准确的百分比,你可以更频繁地执行你的间隔(这里是100ms,我来回看视频时得到了97%),但注意不要占用太多资源。
var player, timer, timeSpent = [], display = document.getElementById('display');
function onYouTubeIframeAPIReady() {
player = new YT.Player( 'player', {
events: { 'onStateChange': onPlayerStateChange }
});
}
function onPlayerStateChange(event) {
if(event.data === 1) { // Started playing
if(!timeSpent.length){
timeSpent = new Array( parseInt(player.getDuration()) );
}
timer = setInterval(record,100);
} else {
clearInterval(timer);
}
}
function record(){
timeSpent[ parseInt(player.getCurrentTime()) ] = true;
showPercentage();
}
function showPercentage(){
var percent = 0;
for(var i=0, l=timeSpent.length; i<l; i++){
if(timeSpent[i]) percent++;
}
percent = Math.round(percent / timeSpent.length * 100);
display.innerHTML = percent + "%";
}
这里有一种方法可以获得用户观看了多少视频的帧完美精度:
食谱
- 获取对 HTML5 视频播放器的引用
- 从视频对象中抓取
played
属性,其中 returns 一个 TimeRanges
对象(参见 https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges)
- 遍历
played
对象,并将所有范围相加
例子
/**
*
* @param {HTMLVideoElement} video
* @returns {{total: number, percent: number}}
*/
function getPlayedTime(video) {
var totalPlayed = 0;
var played = video.played;
for (var i = 0; i < played.length; i++) {
totalPlayed += played.end(i) - played.start(i);
}
return {
total: totalPlayed,
percent: totalPlayed / video.duration * 100
};
}
通过调用上述辅助函数并将您的视频对象传递给它,您将返回一个具有两个属性的对象:用户实际观看的总时长(以秒为单位),以及用户实际观看的视频时长百分比这代表.
这种方法的妙处在于它是 100% 准确的。如果用户反复观看视频的前 5 秒,它仍然会记录只看了 5 秒。浏览器本身会对此进行跟踪,因此您无需设置时间间隔、监听事件等。
Youtube iframe 播放器api 提供了一个功能来翻转视频的当前播放时间player.getCurrentTime():Number
。这可用于跟踪用户观看视频的时间。
您还可以利用player.getDuration()
api 来获取总视频时间并计算进度百分比
这是第一个答案共享的示例的交替 http://jsfiddle.net/ndbseftp/
我正在尝试准确计算用户观看视频的时间。他们观看的时间不应包括快进或暂停的时间。我现在拥有的代码每次都给我不同的百分比(我使用的是间隔)。我不知道还有什么办法可以解决这个问题?
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
clicked_video = true;
arr.length = (player.getDuration()-1).toFixed(0);
done = true;
}if(event.data === YT.PlayerState.PLAYING){
id = setInterval(check, 1000);
}if(event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.BUFFERING){
clearInterval(id);
var percent = 0;
for(var i=0;i<arr.length;i++){
if(arr[i] == "x"){
percent++;
console.log(percent);
}
}
percent = (percent / arr.length) * 100;
alert(percent + "%");
}
}
function check(){
arr[Math.floor(player.getCurrentTime())] = "x";
}
这是一个演示,我认为变量和函数的名称足够明确,可以理解所有内容,但是如果您有任何疑问或问题,请继续提问。
我必须提到的一件事是它不会准确。如果您的间隔每秒执行一次并且用户在一秒钟中间跳过了一部分,则该部分可能不会被计算在内。为了更准确的百分比,你可以更频繁地执行你的间隔(这里是100ms,我来回看视频时得到了97%),但注意不要占用太多资源。
var player, timer, timeSpent = [], display = document.getElementById('display');
function onYouTubeIframeAPIReady() {
player = new YT.Player( 'player', {
events: { 'onStateChange': onPlayerStateChange }
});
}
function onPlayerStateChange(event) {
if(event.data === 1) { // Started playing
if(!timeSpent.length){
timeSpent = new Array( parseInt(player.getDuration()) );
}
timer = setInterval(record,100);
} else {
clearInterval(timer);
}
}
function record(){
timeSpent[ parseInt(player.getCurrentTime()) ] = true;
showPercentage();
}
function showPercentage(){
var percent = 0;
for(var i=0, l=timeSpent.length; i<l; i++){
if(timeSpent[i]) percent++;
}
percent = Math.round(percent / timeSpent.length * 100);
display.innerHTML = percent + "%";
}
这里有一种方法可以获得用户观看了多少视频的帧完美精度:
食谱
- 获取对 HTML5 视频播放器的引用
- 从视频对象中抓取
played
属性,其中 returns 一个TimeRanges
对象(参见 https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges) - 遍历
played
对象,并将所有范围相加
例子
/**
*
* @param {HTMLVideoElement} video
* @returns {{total: number, percent: number}}
*/
function getPlayedTime(video) {
var totalPlayed = 0;
var played = video.played;
for (var i = 0; i < played.length; i++) {
totalPlayed += played.end(i) - played.start(i);
}
return {
total: totalPlayed,
percent: totalPlayed / video.duration * 100
};
}
通过调用上述辅助函数并将您的视频对象传递给它,您将返回一个具有两个属性的对象:用户实际观看的总时长(以秒为单位),以及用户实际观看的视频时长百分比这代表.
这种方法的妙处在于它是 100% 准确的。如果用户反复观看视频的前 5 秒,它仍然会记录只看了 5 秒。浏览器本身会对此进行跟踪,因此您无需设置时间间隔、监听事件等。
Youtube iframe 播放器api 提供了一个功能来翻转视频的当前播放时间player.getCurrentTime():Number
。这可用于跟踪用户观看视频的时间。
您还可以利用player.getDuration()
api 来获取总视频时间并计算进度百分比
这是第一个答案共享的示例的交替 http://jsfiddle.net/ndbseftp/