Youtube跟踪JQuery插件JQuery .tubeplayer.js

Youtube tracking JQuery plugin jQuery.tubeplayer.js

本文关键字：JQuery js tubeplayer 插件 Youtube 跟踪      更新时间：2023-09-26

谢谢你看我的问题，

我试图设置自定义事件(分析跟踪)使用jQuery.tubeplayer.js插件在http://www.tikku.com/jquery-youtube-tubeplayer-plugin#tubeplayer_tutorial_3

我可以得到插件工作，并将事件附加到onPlayerPlaying, onPlayerPaused,onPlayerEnded等，但不能提取我想传递给事件的数据。我想提取视频的URL和视频的时间，当事件被触发。这些数据可以使用showData(jQuery('#youtube-player-container').tubeplayer('data'))从视频中提取;函数在例子中，我似乎不能得到这个数据到我的事件。

我的代码如下: 
<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>

使用脚本tubeplayer Settings在

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

};

想要的具体数据是视频URL，如果可能的话，事件发生的时间。当点击标签时，数据显示在弹出窗口中。

非常感谢任何帮助。

谢谢,西蒙

每次你想从玩家那里获得信息时，你都应该调用$("#youtube-player-container").tubeplayer("data")。这是为了确保您获得最新的信息。

onPlayerX事件内部的代码没有任何意义:

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

因为'data'对象没有指向任何东西。

不使用'data. 'currentTime",使用:

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

你的问题就解决了。

或者，因为您已经设置了'showTime'和'showVideoURL'函数，它们接受一个数据对象，您可以将.tubeplayer("data")对象传递给这些方法，如:

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

类似于在定义initPlayer之前如何使用showData。

有帮助吗?

相关文章：