使用jQuery的Youtube iFrame播放器JS API - 玩家对象有没有方法'getPlayerState“

问题描述

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

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

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“的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！