使用jQuery的Youtube iFrame播放器JS API - 玩家对象有没有方法'getPlayerState“ [英] Youtube iframe player JS API with jQuery - player object has no method 'getPlayerState'

问题描述

我有以下code，这是假设暂停Slidedeck的自动滚屏每当有一个鼠标悬停事件。对于鼠标移开时，自动滚屏应该继续工作，除非在Slidedeck的youtobe视频正在播放或缓冲。我把它工作正常，如果没有对Youtube视频的条件。我相信，有一个与范围为对象播放器有问题，但不能工作了，如何解决这个问题。

我在鼠标移开控制台得到的错误是：

  

未捕获类型错误：对象＃＆LT; T>没有方法'getPlayerState

任何意见欢迎。

下面的链接YouTube播放器IFRAME JS API函数参考：
https://developers.google.com/youtube/iframe_api_reference#Functions

下面是我的code：

  //重新映射了jQuery $
jQuery的（函数（$）{/ *触发时，页面就绪* /
$（文件）。就绪（函数（）{//控制在Slidedeck视频
//查找slidedeck
$（dl.slidedeck）
    //在了mouseenter停止Slidedeck自动播放
    .mouseenter（函数（）{
        $（本）.slidedeck（）pauseAutoPlay = TRUE;
    }）
    //在鼠标离开再次启动Slidedeck自动播放
    .mouseleave（函数（）{
        //但是只有在YT玩家实际上不播放或缓冲
        如果（播放器及放大器;及（player.getPlayerState（）== 1 || player.getPlayerState（）== 3））{
            //如果这是这样，离开此功能
            返回;
        }其他{
            //开启自动播放
            $（本）.slidedeck（）pauseAutoPlay = FALSE;
        }
    }）;
}）;
}）; //重新映射的结束为$ jQuery的
// YouTube播放器API
VAR的球员;
/ *
 *该API将调用此功能时，页面完成下载的JavaScript
 *对于播放器API，它使您能够再使用API​​页面上。从而，
 *这个功能可能会创建要显示在玩家的对象
 *加载页面。
 * /
功能onYouTubeIframeAPIReady（）{
/ *
 *构建YT.Player对象。
 *播放器的所有方法和属性将有稍后被发现。
 * /
玩家=新YT.Player（myYTPlayer，{
    事件：{
        / *
         *在这里，我们重视回调的onStateChange事件。
         *这就是所谓每次播放器的一个状态被改变。
         * /
        onStateChange：onPlayerStateChange
    }
}）;
返回;
}/ *
 *在onStateChange事件的实现。
 *只有参数是一个事件对象，它的数据属性保存一个新的球员状态的值。
 *值：-1（未开始），0（结束），1（播放），2（暂停），3（缓冲），5（插入视频）
 * /
功能onPlayerStateChange（事件）{
//整数，指示播放器的新状态
VAR newState = Event.data中，
    //存储供以后调用slideck元素，所以我们不必再次查询DOM
    $ slidedeck =的jQuery（dl.slidedeck）;//视频加载或缓冲？
如果（newState == 1 || newState == 3）{
    //然后暂停slidedeck自动播放。
    $ slidedeck.slidedeck（）pauseAutoPlay = TRUE。
//视频刚刚结束？
}否则如果（newState == 0）{
    //然后恢复Slidedeck自动播放。
    $ slidedeck.slidedeck（）pauseAutoPlay = FALSE。
}
}
 

解决方案

好吧，我得到它解决了，这是值得阅读的Youtube手册。问题是在嵌入式视频的iframe元素ID的HTML定义。当创建玩家对象，还有第一个参数'myYTPlayer' - 这必须是iframe的ID

 ＆LT; IFRAME ID =myYTPlayerWIDTH =729HEIGHT =410 src=\"http://www.youtube.com/embed/xxxxxxxxxxx?wmode=opaque&version=3&enablejsapi=1&origin=http://example.com\" FRAMEBORDER =0＆GT;＆下; / iframe的＆GT;
 

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.

The error I get in console on mouseout is:

Uncaught TypeError: Object #<T> has no method 'getPlayerState'

Any advice welcome.

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

Here's my code:

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

解决方案

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>

这篇关于使用jQuery的Youtube iFrame播放器JS API - 玩家对象有没有方法'getPlayerState“的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！