CODEWITHSUNDEEP
javascriptjquerycssarrays
irm
irm

Reputation: 4331

Using an array in Jquery

I'm not so experienced with Javascript and I have been struggling with this one pretty much all day.

I'm using Jquery to create and array of the ids of embedded youtube videos:

$(function() {

            $('li').on("click",function(){
                alert($(this).attr('data-pile'));
                var pilename = $(this).attr('data-pile');
                var videoIDs = [];
                $("li[data-pile='"+pilename+"']").each(function(index){
                    videoIDs.push($(this).attr('id'));
                });
                $.each(videoIDs,function(){ 
                });
            });

        });

And I need to use the array in this JS:

<script src="//www.youtube.com/iframe_api"></script>

<script>
    /**
     * Put your video IDs in this array
     */
    var videoIDs = [

     //my array of Ids here   

    ];

    var player, currentVideoId = 0;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '350',
            width: '425',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        event.target.loadVideoById(videoIDs[currentVideoId]);
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            currentVideoId++;
            if (currentVideoId < videoIDs.length) {
                player.loadVideoById(videoIDs[currentVideoId]);
            }
        }
    }
</script>

In each div where embedded videos are I'm applying an id with same id as video. How should I make the two scripts work? I'll really appreciate if someone can point me in the right direction.

Upvotes: 2

Views: 160

Answers (2)

Andy Zee
Andy Zee

Reputation: 335

Try doing it this way: add a custom listener after "click" event. Didn't check your array forming section, tested with a custom array, hope you won't have issues with it.

<script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '350',
            width: '425',
        });
    }    
    $(function(){
        $(document.body).on("click",".play", function(){
            player.stopVideo();
            var pilename = $(this).attr('data-pile');
            var videoIDs = [];
            $("li[data-pile='"+pilename+"']").each(function(index){
                videoIDs.push($(this).attr('id'));
            });

            if(videoIDs.length > 0){

                currentVideoId = 0;

                player.loadVideoById(videoIDs[0]);

                function onPlayerStateChange(event) {
                    if (event.data == YT.PlayerState.ENDED) {
                        currentVideoId++;
                        if (currentVideoId < videoIDs.length) {
                            player.loadVideoById(videoIDs[currentVideoId]);
                        }
                    }
                }

                player.addEventListener("onStateChange", onPlayerStateChange)

                player.playVideo();
            }

        });
    });
</script>

Upvotes: 1

Benjamin Warren
Benjamin Warren

Reputation: 539

You're declaring your videoIDs array twice, once in your click events and again in your second script.

The one inside your click events is local to that function whereas the other one is global. Javascript has function scope, so that click event one gets discarded once that function ends.

If you remove the one inside your click events, I believe it should work. You should also remove the $.each... as I don't think it's going to help (you're trying to make a playlist, right?).

It should be noted that it's considered bad practice to pollute the global namespace by using global variables. If this is all the code you have on your page, it's probably not an issue.

Upvotes: 2

Related Questions