1

I have this test slider http://jsfiddle.net/dUyLY/2/

In Chrome it works nice, but in firefox and safari it bugs out when the animation is done. In the scripts file I check after each animation if the current visible element is the youtube player, if so play the video. And when leaving the slide pause it.

I get this error in console player.pauseVideo is not a function

Anyone has a solution to this?

halliewuud
  • 2,735
  • 6
  • 30
  • 41
  • Please put the code in your question / http://jsfiddle.net/ or http://pastebin.com/. Otherwise, the Q&A will be less helpful to future readers once you update the external page. – Rob W Jul 02 '12 at 12:52

1 Answers1

5

You're deferring the definition of onYouTubePlayerAPIReady. For this reason, it's likely that the YouTube API finishes before onYouTubePlayerAPIReady is defined. In that case, your code will fail.

To solve the problem, check whether the API is ready at run-time.

window.onYouTubePlayerAPIReady = function () {
    player = new YT.Player('player', {
        height: '315',
        width: '560',
        videoId: 'bpOR_HuHRNs',
    });
};
if (window.YT) {
    // Apparently, the API was ready before this script was executed.
    // Manually invoke the function
    onYouTubePlayerAPIReady();
}

Note. For simple one-way functions, such as player.playVideo() and player.pauseVideo(), I recommend to use this simple function, which is not as bloated as the documented YouTube API. See this answer.

Here's a the updated part of your page, using the callPlayer function from my other answer instead of the YouTube API: http://jsfiddle.net/ryyCZ/

<div id="player">
  <iframe width="560" height="315" frameborder="0" src="http://www.youtube.com/embed/bpOR_HuHRNs?enablejsapi=1"></iframe>
</div>

if ($(".slides_control > div:visible #player").length == 1) {
    callPlayer("player","playVideo");
} else {
    callPlayer("player", "pauseVideo");
}
Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • @halliewuud I can't reproduce your issue. I've implemented `callPlayer`, and it should work (because it automatically queues the API calls when the player does not exist yet). Demo included in answer, http://jsfiddle.net/ryyCZ/show/ – Rob W Jul 02 '12 at 13:22
  • Rob, I updated the question with a proper jsfiddle. Your example does not autoplay and and pause when coming to or leaving the player. http://jsfiddle.net/dUyLY/2/ – halliewuud Jul 02 '12 at 13:28
  • @halliewuud I've successfully tested it in Firefox 13.0.1. In Safari 5.1.7, playback works unless using your jQuery plugin. Weird... – Rob W Jul 02 '12 at 13:37
  • 1
    @halliewuud It works fine here, in Chrome 18.0. Please show some efforts by offering a proper bug report: Version number, test location (locally? When using the `file:` protocol, for example, the YT API does not work, regardless of the wrapper). EDIT: This demo has **successfully been *tested*** in Chrome 18, Safari 5.1.7, Firefox 13.0.1: http://jsfiddle.net/ryyCZ/1/. If anything does not work, test again with a clean browser profile. – Rob W Jul 02 '12 at 13:43