Home/ Questions/Q 6940125
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T12:42:46+00:00

thanks for having a look at my question, I am trying to set up

  • 0

thanks for having a look at my question,

I am trying to set up custom events (Analytics tracking) using the jQuery.tubeplayer.js plugin at http://www.tikku.com/jquery-youtube-tubeplayer-plugin#tubeplayer_tutorial_3

I can get the plugin working and attach events to onPlayerPlaying, onPlayerPaused,onPlayerEnded etc but cannot extract the data I want to pass to the event. I want to extract the URL of the video and the time of the video when the event is triggered. This data can be extracted from the video using the showData(jQuery(‘#youtube-player-container’).tubeplayer(‘data’)); function in the example, I cant seem to get this data into my event.

My code is as follows: 

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type='text/javascript' src='js/jQuery.tubeplayer.js'></script>
</head>
<body>
<div id='youtube-player-container'> </div>

 <a onClick="showData(jQuery('#youtube-player-container').tubeplayer('data'));" href="javascript:void(0);">Click here to see data</a>
 <div class="EventListener">The is the initial event listener text</div>
 <a onClick="showVideoURL(jQuery('#youtube-player-container').tubeplayer('data'));">Click to see the URL of the video</a><br/>
 <span class="VideoURL"></span><br/>
<div class="Bufferstatus">The is Buffertext</div>
 <a onClick="showTime(jQuery('#youtube-player-container').tubeplayer('data'));">Click to see the time of the video</a><br/>
<span class="currentTime"></span><br/>
<script>VideoID="i3AqF9e8WV4"</script>
<script src="js/jQuery.tubeplayer.settings.js"></script>

with the script tubeplayer settings at 

var url=location.href;


jQuery.tubeplayer.defaults.afterReady = function(){
//jQuery("#player").tubeplayer("cue", " ");
};
initPlayer();
function showData(data){
var html = "bytesLoaded : " + data.bytesLoaded;
html += " / bytesTotal : " + data.bytesTotal + "\n";
html += "currentTime : " + data.currentTime;
html += " / duration : " + data.duration + "\n";
html += "startBytes : " + data.startBytes + "\n";
html += "state : " + data.state + "\n";
html += "quality : " + data.availableQualityLevels.join(",") + "\n";
html += "url : " + data.videoURL + "\n";
html += "videoID : " + data.videoID;
alert(html);
}



function showTime(data){
$('.currentTime').text('The time when clicked was:' + data.currentTime);
}

 function showVideoURL(data){
$('.VideoURL').text('The video URL is:' + data.videoURL);
 }


showData(jQuery('#youtube-player-container').tubeplayer('data'));

function initPlayer(){
jQuery("#youtube-player-container").tubeplayer({
    initialVideo: VideoID,
    width: 600,
    height: 450,
    onPlayerPlaying: function(){$('.EventListener').text('The video is played at'   + data.currentTime);},      
    onPlayerPaused: function(){$('.EventListener').text('The video is paused at' + data.currentTime);},
    onPlayerEnded: function(){$('.EventListener').text('The video ended');},
    onPlayerBuffering: function(){$('.Bufferstatus').text('The video is buffering');},
    modestbranding: false,
    showControls: 1,
    onQualityChange: function(quality){$('.qualityCheck').text('The quality of the video is: ' +quality);}
});


};

The specific data is would like is the video URL, the time at which the event took place if possible. The data shows in the pop up when the tags are clicked.

Any help is greatly appreciated.

Thanks,

Simon

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should invoke $("#youtube-player-container").tubeplayer("data") every time you want to get information from the player. This is to ensure that you get the most up to date information.

    The code inside of the onPlayerX events doesn’t make any sense:

    $('.EventListener').text('The video is played at'   + data.currentTime);

    since the ‘data’ object doesn’t refer to anything.

    Instead of using ‘data.currentTime’, use:

    $("#youtube-player-container").tubeplayer("data").currentTime

    and that should take care of your issue.

    Alternatively, since you have setup the ‘showTime’ and ‘showVideoURL’ functions that take a data object, you can pass the .tubeplayer("data") object into those methods, like:

    showTime( $("#youtube-player-container").tubeplayer("data") )

    similarly to how showData is being used before initPlayer is defined.

    Does that help?

    • 0