youtube API playVideo, pauseVideo and stopVideo not working

I'm attempting to use the YouTube API to control a set of players in a slideshow. I want to be able to stop and play videos depending on which frame the slideshow is on. So I'm pushing the players into an array based on the id of the frame. When a fame changes I call stop on the current one and start on the new one. However even in the most basic case I'm getting this error:

Uncaught TypeError: Object #<S> has no method 'playVideo'

here is the code for the simple test

<!-- WIDGET YOUTUBE VIDEO -->
<div class="widget_youtube_video" id="wyv_1-5">
    <iframe id="ytplayer_1-5" width="560" height="315" src="//www.youtube.com/embed/CxW8TLtUMfM?autoplay=0&enablejsapi=1&origin=http://mmgi.localhost/" frameborder="0" allowfullscreen></iframe>
    <script type="text/javascript">
        var tag = document.createElement('script');
        tag.src = "//www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        var yt_players = {};

        function onYouTubeIframeAPIReady() {
            yt_players['1-5'] = new YT.Player('ytplayer_1-5');
            yt_players['1-5'].playVideo();
        }
    </script>
</div><!-- end widget_youtube_video -->

I've already tried removing the origin tag from the url to check if that was causing the issues, but it still gave me the same error. Any help would be greatly appreciated as I have no idea where to go from here.

Thanks in advance.

EDIT:

I also tried to put the player in a non-arrayed object and it also did not work.

Answers:

Answer

A couple of things I see going on that may be of use. First of all, removing the origin parameter will help during development, as it prevents access to the API in general if A) it doesn't match exactly, and B) sometimes for no reason when on localhost.

As you note, though, even when removing it in your case the API isn't responding. This is because creating a YT.player object consumes a bit of time, and so you then are trying to trigger a playVideo method before the object is fully initialized. Instead you should utilize the onReady callback parameter of the YT.Player object, like this:

    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var yt_players = {};

    function onYouTubeIframeAPIReady() {
        yt_players['1-5'] = new YT.Player('ytplayer_1-5', {
          events: {'onReady': onPlayerReady} // bind to callback for when object is ready
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo(); // this is kept generic so the same callback can be used with any player object
    }

Here's a fiddle with the working code: http://jsfiddle.net/jlmcdonald/dEjXL/

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.