使用jQuery和谷歌分析事件进行跟踪的YouTube视频播放 [英] Track YouTube Video Playback with jQuery and Google Analytics Events
本文介绍了使用jQuery和谷歌分析事件进行跟踪的YouTube视频播放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有4个IFRAME，我想通过点击其ID恢复。
我走了使用谷歌分析我的iframe中，我把自己的身份证在表中。
然后，我创建一个类型YT.Player的对象
Probleme：方法onPlayerStateChange不运行
这是我的code：
＆LT;脚本类型=文/ JavaScript的＆GT;/ *
YouTube分析
code改编自：
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代表的ISite设计http://isitedesign.com适应由Alex穆勒
* ///启用跨域脚本在IE＆LT; 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吨;返回{派：功能（N，R）{函数I（E，N，I，S）{t.onload = t.onerror = t.ontimeout = jQuery.noop; T =不确定; R（E，N，I，S）} T =新XDomainRequest; t.onload =功能（）{I（200，OK，{文字：t.responseText}，内容类型：+ t.contentType ）}; t.onerror =功能（）{I（404，不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()}}}}})}//加载YouTube的iframe的API
var标记=使用document.createElement（'脚本'）;
tag.src =//www.youtube.com/iframe_api;
VAR firstScriptTag = document.getElementsByTagName（'脚本'）[0];
firstScriptTag.parentNode.insertBefore（标签，firstScriptTag）;//初始化我们的数组来保存视频和播放器的信息
VAR playerArray = []
videoArray = [];//安全通过jQuery对象为$
（函数（$）{
//使所有的YouTube视频跟踪页面上
功能trackYouTube（）{
//通过页面上的每个迭代的iframe
$（'iframe的'）。每个（函数（一）{
//取得视频源和其他属性
VAR baseUrlLength，
$ IFRAME = $（本），
iframeSrc = $ iframe.attr（SRC），
isYouTubeVideo =假，
VIDEOID，
网址; //如果视频使用HTTP协议
如果（iframeSrc.substr（0,25）==http://www.youtube.com/v/）{
baseUrlLength = 25;
isYouTubeVideo = TRUE; }
//否则，如果视频使用HTTPS协议
否则，如果（iframeSrc.substr（0,26）==https://www.youtube.com/v/）{
baseUrlLength = 26;
isYouTubeVideo = TRUE;
} //如果我们处理的YouTube视频，存储其信息在我们的阵列
如果（isYouTubeVideo）{
//抢VIDEOID
VIDEOID = iframeSrc.substr（baseUrlLength）; 网址='//gdata.youtube.com/feeds/api/videos/'+ VIDEOID +V = 2及？ALT = JSON'; //如果ID有多余的字符结束...
如果（videoID.indexOf（'和;'）-1个）{
// ...删除多余的字符
VIDEOID = videoID.substr（0，videoID.indexOf（'和;'））; } //把一个对象，我们与VIDEOID阵列中的...
videoArray [I] = {};
videoArray [I] .ID = VIDEOID; //把VIDEOID上的iframe作为其ID
$ iframe.attr（'身份证'，VIDEOID）; }
}）;
} $（函数（）{
//开展有关文件准备好跟踪
trackYouTube（）;
onYouTubeIframeAPIReady（）;
}）;}）（jQuery的）;功能onYouTubeIframeAPIReady（）{
//插入YouTube播放器对象到我们playerArray
对于（VAR I = 0; I＆LT; videoArray.length;我++）{
playerArray [I] =新YT.Player（videoArray [I] .ID，{
事件：{
onStateChange'：onPlayerStateChange
}
}）;
}
}//当玩家改变状态
功能onPlayerStateChange（事件）{ //如果视频开始播放，发送事件
如果（Event.data中== YT.PlayerState.PLAYING）{
警报（）;
}
//如果视频结束后，发送事件
如果（Event.data中== YT.PlayerState.ENDED）{
警报（）;
}
} ＆LT; / SCRIPT＆GT;
解决方案
您必须设置 enablejsapi 参数为1，你的iframe嵌入的链接。
在默认情况下，该参数设置为0，除非你把它设置为1，则回调将无法工作。
参考： https://developers.google.com/youtube/js_api_reference
I have 4 iframe and I want to recover by clicking on their id . I walked my iframe using google analytic and I put their id in a table. Then I create an object of type YT.Player
Probleme : the method onPlayerStateChange does not run .
here is my code :
<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>
解决方案
You have to set the enablejsapi parameter to 1 in your iframe embed link.
By default, the parameter is set to 0 and unless you set it to 1, the callbacks won't work.
Reference: https://developers.google.com/youtube/js_api_reference
这篇关于使用jQuery和谷歌分析事件进行跟踪的YouTube视频播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
