Question

在过去的几个小时里，我一直在努力在页面上获取几个iFrame，以便在视频启动时停止播放音频播放器。幸运的是，在其他答案的帮助下，我能够使用以下代码来解决大部分问题......：

<script>

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 players = {}; //Define a player storage object, to expose methods,
                  //  without having to create a new class instance again.
YT_ready(function() {
    jQuery("iframe[id]").each(function() {
        var identifier = this.id;
        var frameID = getFrameID(identifier);
        if (frameID) { //If the frame exists
            players[frameID] = new YT.Player(frameID, {
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
        }
    });
});

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        console.log("playing!");
        jQuery('.sp-show-player.playing a.sp-play-button').click();
    }
}
</script>

基本上，当我将iFrame直接放入源代码时，它可以工作。但是，当通过jQuery滑块扩展（在本例中为Revolution Slider）引入iFrame时，状态更改无法识别。我可以从生成的源代码中复制iFrame代码，将其粘贴，然后就可以了。我不确定是否需要在某个地方添加延迟，但我真的很感激帮助。

作为参考点，我有一个我正在使用的iFrame示例，此代码在放入实际页面时（通过HTML）可以正常工作。但是，当通过滑块传送时（使用相同的iFrame代码，逐位数字），它不起作用。

<iframe style="display: block; width: 1840px; height: 900px; transform-style: preserve-3d; z-index: 0; visibility: inherit; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);" src="https://www.youtube.com/embed/5DSXz9xst5k?version=3&amp;enablejsapi=1&amp;html5=1&amp;hd=1&amp;wmode=opaque&amp;showinfo=0&amp;enablejsapi=1;" width="100%" height="100%" id="iframe27350" class="HasListener"></iframe>

非常感谢任何帮助！

Youtube IFrame API - 不注册事件

0 个答案: