Api 使用jQuery和Google Analytics事件跟踪YouTube视频播放

我有4个iframe，我想通过单击它们的id进行恢复。 我使用google Analytical浏览我的iframe，并将他们的id放在一张表中。 然后我创建了一个YT.Player类型的对象

问题：PlayerStateChange方法未运行

这是我的密码：

<script type="text/javascript">

/*
    YouTube Analytics
    Code adapted from:
        http://www.lunametrics.com/blog/2012/10/22/automatically-track-youtube-videos-events-google-analytics/
        http://lunametrics.wpengine.netdna-cdn.com/js/lunametrics-youtube.js
    Code adapted by Alex Mueller for ISITE Design http://isitedesign.com
*/

// enable cross-domain scripting in IE < 10 for the YouTube Data API
// https://github.com/jaubourg/ajaxHooks/blob/master/src/xdr.js
if(window.XDomainRequest){jQuery.ajaxTransport(function(e){if(e.crossDomain&&e.async){if(e.timeout){e.xdrTimeout=e.timeout;delete e.timeout}var t;return{send:function(n,r){function i(e,n,i,s){t.onload=t.onerror=t.ontimeout=jQuery.noop;t=undefined;r(e,n,i,s)}t=new XDomainRequest;t.onload=function(){i(200,"OK",{text:t.responseText},"Content-Type: "+t.contentType)};t.onerror=function(){i(404,"Not Found")};t.onprogress=jQuery.noop;t.ontimeout=function(){i(0,"timeout")};t.timeout=e.xdrTimeout||Number.MAX_VALUE;t.open(e.type,e.url);t.send(e.hasContent&&e.data||null)},abort:function(){if(t){t.onerror=jQuery.noop;t.abort()}}}}})}

// load the YouTube iframe API
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// initialize our arrays to hold video and player information
var playerArray = [],
    videoArray = [];

// safely pass the jQuery object as $
(function($) {
    // enables tracking of all YouTube videos on the page
    function trackYouTube() {
        // iterate through every iframe on the page
        $('iframe').each(function(i) {
            // grab the video source and other properties
            var baseUrlLength,
                $iframe = $(this),
                iframeSrc = $iframe.attr('src'),
                isYouTubeVideo = false,
                videoID,
                url;

            // if the video uses the http protocol
            if (iframeSrc.substr(0,25) == "http://www.youtube.com/v/") {
                baseUrlLength = 25;
                isYouTubeVideo = true;

            }
            // otherwise if the video uses the https protocol
            else if (iframeSrc.substr(0,26) == "https://www.youtube.com/v/") {
                baseUrlLength = 26;
                isYouTubeVideo = true;
            }

            // if we're dealing with a YouTube video, store its information in our arrays
            if (isYouTubeVideo) {
                // grab the videoID
                videoID = iframeSrc.substr(baseUrlLength);

                url = '//gdata.youtube.com/feeds/api/videos/' + videoID + '?v=2&alt=json';

                // if the ID ends with extra characters...
                if (videoID.indexOf('&') > -1) {
                    // ...remove the extra characters
                    videoID = videoID.substr(0, videoID.indexOf('&'));

                }

                // put an object in our array with the videoID...
                videoArray[i] = {};
                videoArray[i].id = videoID;

                // put the videoID on the iframe as its id
                $iframe.attr('id', videoID);

            }
        });
    }

    $(function() {
        // initiate tracking on document ready
        trackYouTube();
                onYouTubeIframeAPIReady();
    });

})(jQuery);

function onYouTubeIframeAPIReady() {
    // insert YouTube Player objects into our playerArray
    for (var i = 0; i < videoArray.length; i++) {
        playerArray[i] = new YT.Player(videoArray[i].id, {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }
}

// when the player changes states
function onPlayerStateChange(event) {

    // if the video begins playing, send the event
    if (event.data == YT.PlayerState.PLAYING) {
        alert();
    }
    // if the video ends, send the event
    if (event.data == YT.PlayerState.ENDED) {
        alert();
    }
}

        </script>

/*
YouTube分析
代码改编自：
http://www.lunametrics.com/blog/2012/10/22/automatically-track-youtube-videos-events-google-analytics/
http://lunametrics.wpengine.netdna-cdn.com/js/lunametrics-youtube.js
Alex Mueller为ISITE设计改编的代码http://isitedesign.com
*/
//在IE<10中为YouTube数据API启用跨域脚本
// https://github.com/jaubourg/ajaxHooks/blob/master/src/xdr.js
if（window.XDomainRequest）{jQuery.ajaxTransport（function（e）{if（e.crossDomain&&e.async）{if（e.timeout）{e.xdrTimeout=e.timeout；delete e.timeout}var t；return{send:function（n，r）{function i（e，n，n，i，s）{t.onload=t.onerror=t.ontimeout=jQuery.noop；t=undefined；r（e，n，i，i，s）}t=new XDomainRequest+t、 contentType）}；t.onerror=function（）{i（404，“未找到”）}；t.onprogress=jQuery.noop；t.ontimeout=function（）{i（0，“超时”）}；t.timeout=e.xdrTimeout | | Number.MAX_VALUE；t.open（e.type，e.url）；t.send（e.hascacontent&&e.data | | null）}，abort:function（）{if（t）{t.onerror=jQuery noop；t.abort（）}}}
//加载YouTube iframe API
var tag=document.createElement（'script'）；
tag.src=“//www.youtube.com/iframe_api”；
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
//初始化阵列以保存视频和播放器信息
var playerArray=[]，
视频阵列=[]；
//安全地将jQuery对象作为$
（函数（$）{
//支持跟踪页面上的所有YouTube视频
函数trackYouTube（）{
//迭代页面上的每个iframe
$（'iframe'）。每个（函数（i）{
//抓取视频源和其他属性
var baseurlength，
$iframe=$（此），
iframeSrc=$iframe.attr（'src'），
isYouTubeVideo=false，
videoID，
网址；
//如果视频使用http协议
如果（iframeSrc.substr（0,25）=”http://www.youtube.com/v/") {
baseUrlLength=25；
isYouTubeVideo=真；
}
//否则，如果视频使用https协议
else if（iframeSrc.substr（0,26）=“https://www.youtube.com/v/") {
baseUrlLength=26；
isYouTubeVideo=真；
}
//如果我们正在处理YouTube视频，请将其信息存储在我们的阵列中
如果（isYouTubeVideo）{
//抓取视频ID
videoID=iframeSrc.substr（baseurlength）；
url='//gdata.youtube.com/feeds/api/videos/'+videoID+'？v=2&alt=json'；
//如果ID以额外字符结尾。。。
if（videoID.indexOf（'&'）>-1）{
//…删除多余的字符
videoID=videoID.substr（0，videoID.indexOf（'&'）；
}
//在数组中放置一个具有videoID的对象。。。
视频阵列[i]={}；
videoArray[i].id=videoID；
//将videoID作为其id放在iframe上
$iframe.attr（'id'，videoID）；
}
});
}
$（函数（）{
//启动对文档准备就绪的跟踪
trackYouTube（）；
onYouTubeIframeAPIReady（）；
});
})（jQuery）；
函数onyoutubeiframeapiredy（）{
//将YouTube播放器对象插入我们的playerArray
对于（变量i=0；i

您必须在iframe嵌入链接中将

enablejsapi

参数设置为1

默认情况下，该参数设置为0，除非将其设置为1，否则回调将不起作用

参考：