带有 jQ​​uery 的 Youtube iframe 播放器 JS API - 播放器对象没有方法“getPlayerState"

问题描述

我有以下代码，假设在发生鼠标悬停事件时暂停 Slidedeck 的自动滚动.对于 mouseout 事件，除非 Slidedeck 中的 youtobe 视频当前正在播放或缓冲，否则自动滚动应该继续工作.如果没有 Youtube 视频的条件，我就可以正常工作.我认为对象播放器的范围有问题，但无法解决，如何解决此问题.

I've got following code, that is suppose to pause Slidedeck's autoscroll whenever there is a mouseover event. For mouseout event, the autoscroll should resume working unless the youtobe video in the Slidedeck is currently playing or buffering. I got it working fine if there wasn't the condition for the Youtube video. I believe there's a problem with the scope for the object player, but can't work it out, how to fix this problem.

我在 mouseout 控制台中得到的错误是:

The error I get in console on mouseout is:

未捕获的类型错误:对象# 没有方法getPlayerState"

欢迎任何建议.

这是 YT 播放器 iframe JS API 函数参考的链接:https://developers.google.com/youtube/iframe_api_reference#Functions

Here's link to YT player iframe JS API function reference:https://developers.google.com/youtube/iframe_api_reference#Functions

这是我的代码:

// remap jQuery to $
jQuery(function ($) {

/* trigger when page is ready */
$(document).ready(function (){

// Control for the video in Slidedeck
// Find slidedeck
$( "dl.slidedeck" )
    // On mouseenter stop the Slidedeck autoplay
    .mouseenter( function() {
        $( this ).slidedeck().pauseAutoPlay = true;
    })
    // On mouseleave start the Slidedeck autoplay again
    .mouseleave( function() {
        // But only if the YT player isn't actually playing or buffering
        if ( player && ( player.getPlayerState() == 1 || player.getPlayerState() == 3 )) {
            // If that's so, leave the function
            return;
        } else {
            // Turn on autoplay
            $( this ).slidedeck().pauseAutoPlay = false;
        }
    });


});
}); // end of remap for $ to jQuery


// Youtube player API
var player;
/*
 * The API will call this function when the page has finished downloading the JavaScript
 * for the player API, which enables you to then use the API on your page. Thus,
 * this function might create the player objects that you want to display when
 * the page loads.
 */
function onYouTubeIframeAPIReady() {
/*
 * Constructing a YT.Player object.
 * All methods and properties of the player will be found there later.
 */
player = new YT.Player( "myYTPlayer", {
    events: {
        /*
         * Here we attach callback for the onStateChange event.
         * That is called everytime a state of the player is changed.
         */
        "onStateChange": onPlayerStateChange
    }
});
return;
}

/*
 * Implementation of the onStateChange event.
 * Only parameter is an event object, its data property holds a value of a new player state.
 * Values: -1 (unstarted), 0 (ended), 1 (playing), 2 (paused), 3 (buffering), 5 (video cued)
 */
function onPlayerStateChange( event ) {
// integer indicating new state of the player
var newState = event.data,
    // store the slideck element for later calls, so we don't have to query the DOM again
    $slidedeck = jQuery( "dl.slidedeck" );

// Video loading or buffering?
if ( newState == 1 || newState == 3 ) {
    // Then pause the slidedeck autoplay.
    $slidedeck.slidedeck().pauseAutoPlay = true;
// Video has just ended?
} else if ( newState == 0 ) {
    // Then resume the Slidedeck autoplay.
    $slidedeck.slidedeck().pauseAutoPlay = false;
}
}

推荐答案

好的，我解决了，值得阅读 Youtube 手册.问题在于嵌入视频的 iframe 元素的 id 的 HTML 定义.创建播放器对象时，有第一个参数 'myYTPlayer' - 这必须是 iframe 的 id

Ok I got it resolved, it was worth reading the Youtube manual. Problem was in HTML definition of id for the iframe element of the embedded video. When creating the player object, there's first parameter 'myYTPlayer' - this must be the id of the iframe

<iframe id="myYTPlayer" width="729" height="410" src="http://www.youtube.com/embed/xxxxxxxxxxx?wmode=opaque&version=3&enablejsapi=1&origin=http://example.com" frameborder="0"></iframe>

这篇关于带有 jQ​​uery 的 Youtube iframe 播放器 JS API - 播放器对象没有方法“getPlayerState"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！