在JavaScript或jQuery中收听Youtube事件

我有一个滑动条，其中包括4个youtube视频，通过iframe嵌入代码嵌入

http://www.youtube.com/embed/'.$i.'?enablejsapi=1

我试图使四个视频中的任何一个的onStateChange事件调用我称为stopCycle()的函数，该函数将在视频开始播放时停止滑块。iframe没有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 Frame API 不支持现有的帧。为了改进用法，我创建了一些辅助函数。看看下面的代码+注释和演示: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);
})();

//以前，核心函数是定义的。展望实现:

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

如果您想稍后调用其他功能，例如静音视频，请使用:

player.mute();

如果您只需要调用简单的单向函数，则没有必要使用此代码。相反，使用函数callPlayer定义在这个答案。
如果你想为多个帧同时实现此功能，请查看此答案。还包括getFrameID和YT_ready 的详细说明。

你可以使用tubeplayer插件，它有很多事件要听

从昨天起，这个不再工作了。onStateChange没有被触发。Jeffrey发布了一个快速修复，但我无法更新上述答案

关于此问题的更多信息https://code.google.com/p/gdata-issues/issues/detail?id=4706

得到了它的工作:-)与修复

添加以下函数

function onReady() {
    player.addEventListener('onStateChange', function(e) {
        console.log('State is:', e.data);
    });
}

在"onStateChange"之前:stopCycle添加"onReady": onReady，

我在我的聊天中有这个功能，允许用户发布youtube上的视频。vid的url被附加为id.

的现有iframe的源。

我注意到的是-虽然添加了?enablejsapi=1 -脚本只适用于页面加载上现有的iframe。

如果想要在为iframe设置新源后绑定此脚本，该如何处理?

相关内容

最新更新

热门标签：