Javascript 带有jQuery-player对象的Youtube iframe player JS API没有方法';getPlayerState';
我有下面的代码,假设在鼠标经过时暂停Slidedeck的自动滚动。对于mouseout事件,除非滑块中的youtobe视频当前正在播放或缓冲,否则autoscroll应恢复工作。如果没有Youtube视频的条件,我可以正常工作。我相信对象播放器的作用域有问题,但无法解决,如何解决这个问题 我在mouseout控制台中遇到的错误是: 未捕获的TypeError:对象#没有方法“getPlayerState” 欢迎任何意见 以下是YT player iframe JS API函数参考的链接: 这是我的密码:Javascript 带有jQuery-player对象的Youtube iframe player JS API没有方法';getPlayerState';,javascript,jquery,api,scope,youtube-javascript-api,Javascript,Jquery,Api,Scope,Youtube Javascript Api,我有下面的代码,假设在鼠标经过时暂停Slidedeck的自动滚动。对于mouseout事件,除非滑块中的youtobe视频当前正在播放或缓冲,否则autoscroll应恢复工作。如果没有Youtube视频的条件,我可以正常工作。我相信对象播放器的作用域有问题,但无法解决,如何解决这个问题 我在mouseout控制台中遇到的错误是: 未捕获的TypeError:对象#没有方法“getPlayerState” 欢迎任何意见 以下是YT player iframe JS API函数参考的链接: 这是
// 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
<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>
在调用getPlayerState之前,也可以先听播放器的onReady事件()(可能在加载文档后才准备就绪)