Using an array in Jquery

Question

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.

jquery is javascript.

mkoryak
– mkoryak

2013-09-20 05:52:00 +00:00
Commented Sep 20, 2013 at 5:52 — mkoryak
– mkoryak, Commented Sep 20, 2013 at 5:52

Benjamin Warren · Accepted Answer · 2013-09-20 06:08:21Z

2

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.

answered Sep 20, 2013 at 6:08

Benjamin Warren

5394 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andy Zee · Accepted Answer · 2013-09-20 07:08:41Z

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>

Collectives™ on Stack Overflow

Using an array in Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related