在JavaScript或jQuery中监听Youtube事件
我有一个滑块，其中包括通过iframeembedded代码embedded的4个youtubevideo
http://www.youtube.com/embed/'.$i.'?enablejsapi=1
我正在尝试使四个video中的任何一个的onStateChange事件调用一个我称之为stopCycle()的函数，当video开始播放时，它将停止滑动条。 内联框架没有ID。 我不知道如何正确地捕捉这个事件，并可以使用任何意见，我做错了什么。
<script charset="utf-8" type="text/javascript" src="http://www.youtube.com/player_api"></script> var playerObj = document.getElementById("tab2"); // the container for 1 of the 4 iframes playerObj.addEventListener("onStateChange", "stopCycle"); function stopCycle(event) { alert('Stopped!'); }
YouTube框架API支持现有的框架 。 为了提高使用率，我创build了一些帮助函数。 看看下面的代码+评论和演示： http : //jsfiddle.net/YzvXa/197
要将函数绑定到现有帧， 必须将ID引用传递给帧。 在你的情况下，框架被包含在id="tab2"的容器中。 我已经定义了一个自定义函数，以便于实现：
function getFrameID(id){ var elem = document.getElementById(id); if (elem) { if(/^iframe$/i.test(elem.tagName)) return id; //Frame, OK // else: Look for frame var elems = elem.getElementsByTagName("iframe"); if (!elems.length) return null; //No iframe found, FAILURE for (var i=0; i<elems.length; i++) { if (/^https?:\/\/(?:www\.)?youtube(?:-nocookie)?\.com(\/|$)/i.test(elems[i].src)) break; } elem = elems[i]; //The only, or the best iFrame if (elem.id) return elem.id; //Existing ID, return it // else: Create a new ID do { //Keep postfixing `-frame` until the ID is unique id += "-frame"; } while (document.getElementById(id)); elem.id = id; return id; } // If no element, return null. return null; } // Define YT_ready function. var YT_ready = (function() { var onReady_funcs = [], api_isReady = false; /* @param func function Function to execute on ready * @param func Boolean If true, all qeued functions are executed * @param b_before Boolean If true, the func will added to the first position in the queue*/ return function(func, b_before) { if (func === true) { api_isReady = true; while (onReady_funcs.length) { // Removes the first func from the array, and execute func onReady_funcs.shift()(); } } else if (typeof func == "function") { if (api_isReady) func(); else onReady_funcs[b_before?"unshift":"push"](func); } } })(); // This function will be called when the API is fully loaded function onYouTubePlayerAPIReady() {YT_ready(true)} // Load YouTube Frame API (function() { // Closure, to not leak to the scope var s = document.createElement("script"); s.src = (location.protocol == 'https:' ? 'https' : 'http') + "://www.youtube.com/player_api"; var before = document.getElementsByTagName("script")[0]; before.parentNode.insertBefore(s, before); })();
//以前，定义了核心function。 outlook未来的实施：
var player; //Define a player object, to enable later function calls, without // having to create a new class instance again. // Add function to execute when the API is ready YT_ready(function(){ var frameID = getFrameID("tabs2"); if (frameID) { //If the frame exists player = new YT.Player(frameID, { events: { "onStateChange": stopCycle } }); } }); // Example: function stopCycle, bound to onStateChange function stopCycle(event) { alert("onStateChange has fired!\nNew state:" + event.data); }
如果您想稍后调用其他function，例如静音video，请使用：
player.mute();
- 如果您只需调用简单的单向函数，则不需要使用此代码。 相反，使用此答案中定义的函数
callPlayer。 - 如果您想要为多个框架实现此function，请同时查看此答案 。 还包括
getFrameID和YT_ready的详细说明 。
你可以使用tubeplayer插件，它有很多事件来听。
从昨天起，这不再起作用。 onStateChange不会被触发。 杰弗里发布了一个快速修复，但我无法更新上述答案
有关此问题的详情https://code.google.com/p/gdata-issues/issues/detail?id=4706
得到它的工作:-)与修复
添加以下function
function onReady() { player.addEventListener('onStateChange', function(e) { console.log('State is:', e.data); }); }
和“onStateChange”之前：stopCycle添加“onReady”：onReady，
我的聊天function使用户能够通过YouTube发布vid。 vid的url作为现有iframe的id来源。
我注意到的是 – 虽然？enablejsapi = 1被添加 – 该脚本只能在页面加载现有的iframe上工作。
在为iframe设置一个新的源代码之后，如何在想要绑定这个脚本的时候去做这件事呢？
