Trying to get Shuffle Playlist to work

JavaScript
43

This:
It’s not working though.

  function addVideo(video) {

const playlist = "Nbp8XZnzfT8," + "mnfmQe8Mv1g," + 
"-Xgi_way56U," + "CHahce95B1g," + "u8hvzxYSPjQ," + 
"qwertyuiop," + "PEJpJ1UKQpg," + "pIuWymsUuk0," + "qYEooPeyz5M";

    new YT.Player(video, {
      videoId: video.dataset.id,
      width: 606,
      height: 344,
      playerVars: {
        autoplay: 1,
        controls: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        playlist: playlist.join(",")
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  }
44

Now, why are you hard-coding the playlist information in the code, when you can instead create the playlist on youtube and use that playlist instead?

45

It’s a pain to have to login every time to add or remove a song. Using id’s I don’t need to login at all.

46

#43 It’s not working here though:

And console isn’t telling me anything.

Maybe it’s only able to work this way:

    function addVideo(video) {

        const playlist = ["Nbp8XZnzfT8", "mnfmQe8Mv1g", 
        "ZPz3wzPlruA","-Xgi_way56U", "CHahce95B1g", "u8hvzxYSPjQ", 
        "PEJpJ1UKQpg", "pIuWymsUuk0", "qYEooPeyz5M"];

        new YT.Player(video, {
            videoId: video.dataset.id,
            width: 606,
            height: 344,
            playerVars: {
                autoplay: 1,
                controls: 1,
                rel: 0,
                iv_load_policy: 3,
                cc_load_policy: 0,
                fs: 0,
                disablekb: 1,
                playlist: playlist.join(",")
            },
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        });
    }
47

This Works:

        const playlist = ["Nbp8XZnzfT8", "mnfmQe8Mv1g", 
        "ZPz3wzPlruA","-Xgi_way56U", "CHahce95B1g", "u8hvzxYSPjQ", 
        "PEJpJ1UKQpg", "pIuWymsUuk0", "qYEooPeyz5M"];

playlist: playlist.join(",")

This Doesn’t Work:
And maybe there is no way for it to work like this.

        const playlist = "Nbp8XZnzfT8," + "mnfmQe8Mv1g," + 
       "-Xgi_way56U," + "CHahce95B1g," + "u8hvzxYSPjQ," + 
       "qwertyuiop," + "PEJpJ1UKQpg," + "pIuWymsUuk0," + "qYEooPeyz5M";

 playlist: playlist.join(",")
48

The join is screwing up the second example, because playlist is just a string.

49

Can that be resolved, or fixed? or no?

50

Yes, by my favorite technique. Delete it.

51

This would become what then?
How much of it gets deleted?

playlist: playlist.join(",")

This
playlist: playlist

Then What?

52

Then you could condense it even further, by turning playlist: playlist into just playlist

53

Then what?

playlist

  function addVideo(video) {

const playlist = "Nbp8XZnzfT8," + "mnfmQe8Mv1g," + 
"-Xgi_way56U," + "CHahce95B1g," + "u8hvzxYSPjQ," + 
"qwertyuiop," + "PEJpJ1UKQpg," + "pIuWymsUuk0," + "qYEooPeyz5M";

    new YT.Player(video, {
      videoId: video.dataset.id,
      width: 606,
      height: 344,
      playerVars: {
        autoplay: 1,
        controls: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        playlist
      },
54

What do you mean? It works, doesn’t it?

55

There’s no playlist

Click on it you’ll see.

That video you see goes to this:
data-id="wyejXA9sZtE"

56

There’s no playlist because you’ve given an invalid video id of “qwertyuiop”

What games are you playing at here?

1 Like
57

I’m not playing any games at all.

I did something wrong then.

58

I hadn’t realized that was wrong. Thank you for catching it.

Fixed:

  function addVideo(video) {

const playlist = "Nbp8XZnzfT8," + "mnfmQe8Mv1g," + 
"-Xgi_way56U," + "CHahce95B1g," + "u8hvzxYSPjQ," + 
"PEJpJ1UKQpg," + "pIuWymsUuk0," + "qYEooPeyz5M";

    new YT.Player(video, {
      videoId: video.dataset.id,
      width: 606,
      height: 344,
      playerVars: {
        autoplay: 1,
        controls: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        playlist
      },
59

It doesn’t have to be broken up by separate video ids. It can be only enough to allow for JsLint’s 80-character limit.

        const playlist = "Nbp8XZnzfT8,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g" +
            ",u8hvzxYSPjQ,PEJpJ1UKQpg,pIuWymsUuk0,qYEooPeyz5M";
1 Like
60

Would an array be able to work with just playlist?

function addVideo(video) {

        const playlist = ["Nbp8XZnzfT8", "mnfmQe8Mv1g", 
        "ZPz3wzPlruA","-Xgi_way56U", "CHahce95B1g", "u8hvzxYSPjQ", 
        "PEJpJ1UKQpg", "pIuWymsUuk0", "qYEooPeyz5M"];

        new YT.Player(video, {
            videoId: video.dataset.id,
            width: 606,
            height: 344,
            playerVars: {
                autoplay: 1,
                controls: 1,
                rel: 0,
                iv_load_policy: 3,
                cc_load_policy: 0,
                fs: 0,
                disablekb: 1,
                playlist
            },
61

You can join the array items together at the end of the array, using the join method.

1 Like
62

Got it:

I had 2 broken ids in there before.
Fixed:
Now I know to make sure the id’s are valid.

    function addVideo(video) {
 
    const playlist = ["Nbp8XZnzfT8","mnfmQe8Mv1g","-Xgi_way56U",
    "u8hvzxYSPjQ","PEJpJ1UKQpg","jERuptzwgHY","qYEooPeyz5M",
    "CHahce95B1g", "luQSQuCHtcI" ].join(",");
    
        new YT.Player(video, {
            videoId: video.dataset.id,
            width: 606,
            height: 344,
            playerVars: {
                autoplay: 1,
                controls: 1,
                rel: 0,
                iv_load_policy: 3,
                cc_load_policy: 0,
                fs: 0,
                disablekb: 1,
                playlist