Playing YouTube videos from an array

asasass · August 31, 2021, 9:19pm

This? a
addPlayer(video, settings, x, y = 7, z = 42) {

this: b
addPlayer(video, settings, y = 7, z = 42) {

this: c
addPlayer(video, settings, 7, 42) {

This one? C

Paul_Wilkins · September 1, 2021, 1:04am

No that’s not it.

From the following code that you started with:

addPlayer(video, settings, videoIds) {

It’s only to the videoIds parameter that you are assigning a default parameter of video.dataset.id

asasass · September 1, 2021, 1:08am

This?

Is this right?
addPlayer(video, settings, videoIds(7, 42)) {

I’m looking at these:

Paul_Wilkins · September 1, 2021, 3:16am

Yes, those are examples of how to do a default parameter. With your code there is no number 7 or 42 that’s involved

Here is what you are adding the default parameter to.

addPlayer(video, settings, videoIds) {

Instead with your code, it is to videoIds that you are being asked to use video.dataset.id as the default parameter.

asasass · September 1, 2021, 3:18am

I’m not understanding what I need to do.

None of these are right.

What am doing that I shouldn’t be doing.

I’m confused.

Are any of these close?

addPlayer(video, settings, videoIds)
addPlayer(video, settings, videoIds(7, 42)) {
addPlayer(video, settings, videoIds)
addPlayer(video, settings, video.dataset.id(videoIds)) {
addPlayer(video, settings, videoIds(id)) {
addPlayer(video, settings, videoIds(a, b, c)) {

(a, b) is a default parameter

videoIds(a, b)

asked to use video.dataset.id as the default parameter.

videoIds(video.dataset.id)

videoIds(a, b, c)

This whole thing is being added somewhere?

video.dataset.id

Is it being turned into (a, b, c)
or, (a, b)

videoIds(default parameter goes here)

Paul_Wilkins · September 1, 2021, 6:06am

No none of those are right. You’ll get it though.

Here is a function that has no default parameters

    function createPlayer(videoWrapper, settings, videoIds) {

To help solve some issues, we gave the settings parameter a default value of {}

    function createPlayer(videoWrapper, settings = {}, videoIds) {

And we also gave videoIds a default value of “”

    function createPlayer(videoWrapper, settings = {}, videoIds = "") {

That createPlayer function is from the code that you provided at https://jsfiddle.net/9kap56xw/

It is a different default value that you are being asked to do for the addPlayer function.

    function addPlayer(video, settings, videoIds) {

I am asking you to update only the addPlayer line to give videoIds a default value of video.dataset.id

Come on asasass - you have been given plenty of information about default parameters. It is only an update to the one line that is needed. I know that you’re capable of doing this.

asasass · September 1, 2021, 6:09am

This One?

function addPlayer(video, settings, videoIds = {video.dataset.id} {

or

function addPlayer(video, settings, videoIds = "video.dataset.id" {

or

function addPlayer(video, settings, videoIds = "video.dataset.id") {

asasass · September 1, 2021, 6:47am

When I add it to the code, should the code still be working?

asasass · September 1, 2021, 6:57am

Code still works.

Is this right?
https://jsfiddle.net/ezb52tcj/


   function addPlayer(video, settings, videoIds = "video.dataset.id")  {
        const videoId = !Array.isArray(videoIds) && videoIds;
        const playlist = Array.isArray(videoIds) && videoIds;
        const defaults = {
            playerOptions: {
                events: {
                    "onReady": onPlayerReady
                },
                host: "https://www.youtube-nocookie.com",
                videoId: video.dataset.id
            }
        };
        const defaultOptions = defaults.playerOptions;
        const playerOptions = Object.assign({}, defaultOptions, settings);
        players.push(new YT.Player(video, playerOptions));
    }

Paul_Wilkins · September 1, 2021, 8:33am

You’re nearly there. The default parameter of video.dataset.id shouldn’t be a string. It needs to be without the double quotes.

asasass · September 1, 2021, 3:18pm

Here:

https://jsfiddle.net/swygoq7c/

 function addPlayer(video, settings, videoIds = video.dataset.id)  {
        const videoId = !Array.isArray(videoIds) && videoIds;
        const playlist = Array.isArray(videoIds) && videoIds;
        const defaults = {
            playerOptions: {
                events: {
                    "onReady": onPlayerReady
                },
                host: "https://www.youtube-nocookie.com",
                videoId: video.dataset.id
            }
        };
        const defaultOptions = defaults.playerOptions;
        const playerOptions = Object.assign({}, defaultOptions, settings);
        players.push(new YT.Player(video, playerOptions));
    }

Checked jslint: same errors. What is next?

If I do this:

https://jsfiddle.net/swygoq7c/1/

    function addPlayer(video, settings, videoIds = video.dataset.id) {
        const videoId = !Array.isArray(video.dataset.id) && video.dataset.id;
        const playlist = Array.isArray(video.dataset.id) && video.dataset.id;
        const defaults = {
            playerOptions: {
                events: {
                    "onReady": onPlayerReady
                },
                host: "https://www.youtube-nocookie.com",
                videoId: video.dataset.id
            }
        };
        const defaultOptions = defaults.playerOptions;
        const playerOptions = Object.assign({}, defaultOptions, settings);
        players.push(new YT.Player(video, playerOptions));
    }

I get:

Unused ‘videoIds’.
function addPlayer(video, settings, videoIds = video.dataset.id) {
67: 152.

Unused ‘videoId’.
const videoId = !Array.isArray(video.dataset.id) && video.dataset.id;

Paul_Wilkins · September 1, 2021, 9:18pm

Now that video.dataset.id is being correctly given as a default parameter, there is no need to refer to it anywhere inside of that function.

Inside of that addPlayer function you should remove video.dataset.id, and also remove the colon from that same line.

Paul_Wilkins · September 1, 2021, 11:14pm

As a bit of background, inside of an object when only a variable is used, that variable name is used as the property name.

Here is an object that only has one variable mentioned inside of it.
Do not use the below full object in your code. This object is here to demonstrate something.

const defaults = {
    videoId
};

The above property of the object can also be stated in JavaScript using a key/value pair for the property.
Do not use the below full object in your code. This object is here to demonstrate something.

const defaults = {
    videoId: videoId
};

And the way that JavaScript interprets both of the above properties of the object is as follows.
Do not use the below full object in your code. This object is here to demonstrate something.

const defaults = {
    "videoId": videoId
};

What that means is that inside of objects, the double quotes around the key part of the key/value pair is optional. What it also means is that when the key and value parts are both the same, you can use only the variable for the value, and the key is automatically figured out from the variable name.

Fortunately, JSLint supports all of the above as being good techniques to use for objects.

Now that your addPlayer function has its defaultParameter set, you can solve that problem by removing video.dataset.id from the inside of that function, and also remove the colon from that same line.

Paul_Wilkins · September 2, 2021, 8:47am

So far as the JSLint issues with the code at https://jsfiddle.net/swygoq7c/ are concerned, in order of how they are resolved, they are:

Expected ‘function’ at column 5, not column 4.
Expected one space between ‘)’ and ‘{’.
Unused ‘videoId’.
Unused ‘playlist’.
Unused ‘paramInOptions’.

The playlist is the trickiest one to deal with. The rest of them should be easy for you to take care of.

asasass · September 2, 2021, 8:52am

Is this good so far?
https://jsfiddle.net/hfqrbzw6/1/

   function addPlayer(video, settings, videoIds = video.dataset.id)  {
        const videoId = !Array.isArray(videoIds) && videoIds;
        const playlist = Array.isArray(videoIds) && videoIds;
        const defaults = {
            playerOptions: {
                events: {
                    "onReady": onPlayerReady
                },
                host: "https://www.youtube-nocookie.com",
                "videoId": videoId
            }
        };
        const defaultOptions = defaults.playerOptions;
        const playerOptions = Object.assign({}, defaultOptions, settings);
        players.push(new YT.Player(video, playerOptions));
    }

I am up to fixing playlist.

and I don’t understand how to do the others either
https://jsfiddle.net/hutopr1v/

1. Unused ‘playlist’.
const playlist = Array.isArray(videoIds) && videoIds;

2. Unused ‘paramInOptions’.
function paramInOptions(opts, param) {

3. Unused ‘optionParams’.
const optionParams = ["width", "height", "videoid", "host"];

This:

function paramInOptions(opts, param = Something goes here?) {

    function createPlayerOptions(settings) {
        function paramInOptions(opts, param) {
            if (settings[param] !== undefined) {
                opts[param] = settings[param];
                delete settings[param];
            }
            return opts;
        }

Paul_Wilkins · September 2, 2021, 7:58pm

Yes that’s okay, although with the following code:

                "videoId": videoId

it is “good practice” to simplify things and have only videoId there instead.

With the unused playlist, that needs to go inside of playerVars. The best way to achieve that is to add to playerOptions a parameter called playerVars, and make playerVars an object. Then inside of that object you can put playlist as a parameter.

asasass · September 2, 2021, 9:15pm

This?

https://jsfiddle.net/q8d5obyw/3

const optionParams = ["width", "height", "playlist", "host", "videoid"];

function addPlayer(video, settings, videoIds = video.dataset.id)  {
        const videoId = !Array.isArray(videoIds) && videoIds;
        const playlist = Array.isArray(videoIds) && videoIds;
        const defaults = {
            playerOptions: {
              playerVars: {
              playlist, 
               },
                events: {
                    "onReady": onPlayerReady
                },
                host: "https://www.youtube-nocookie.com",
                videoId
            }
        };

asasass · September 2, 2021, 9:29pm

If the above is right, I am up to this next, which is giving me problems.

Because of this error:

Expected property ‘events’ to be ordered before property ‘playerVars’.
events: {

I did this, but I did not do it right.

Changing this: What is the right way to change this?

Last Working Code:
https://jsfiddle.net/q8d5obyw/3

        const defaults = {
            playerOptions: {
              playerVars: {
              playlist, 
               },
                events: {
                    "onReady": onPlayerReady
                },

To this? This was my attempt.
https://jsfiddle.net/f86ghs3d/

const config = {
      host: "https://www.youtube-nocookie.com",
      videoId
    };
    config.playerVars = {
          playlist
      
    }
    config.events = {
      "onReady": onPlayerReady
    };
    const defaultOptions = config.playerVars;
  }

And then wouldn’t I need to change this one also?

const managePlayer = (function makeManagePlayer() {
  const defaults = {
    playerOptions: {
      height: 600,
      playerVars: {
        autoplay: 0,
        controls: 1,
        disablekb: 1,
        enablejsapi: 1,
        fs: 0,
        iv_load_policy: 3,
        rel: 0
      },
      width: 360
    }
  };

Now I’m confused on how to fix this:

Expected property ‘events’ to be ordered before property ‘playerVars’.
events: {

I have this example to work off of.
Which is how I tried to replicate it above:

    const config = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      width: 640
    };
    config.playerVars = {
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      loop: 1,
      playlist,
      rel: 0
    };
    config.events = {
      "onReady": onPlayerReady
    };

Paul_Wilkins · September 2, 2021, 10:37pm

I find it very helpful for the code to be properly indented. With jsfiddle I go to settings (at the top right) and set the indent to four spaces. Then I click back in the JS section and at the top right of the JS section is Tidy. Click on that and the formatting is all fixed up.

After having tidied up the formatting of the code, it is easy to see the problem. The problem here is that JSLint wants all of the property names to be alphabetically ordered.

Currently the order is: playerVars, events, host, and videoId.
The order that they are supposed to be in is events, host, playerVars, and then videoId. That puts them into the expected alphabetical order.

asasass · September 2, 2021, 10:38pm

Doing this is how it was fixed in the other code:

Shouldn’t it be set up similar to how this one was?

This other code.
https://www.sitepoint.com/community/t/im-receiving-a-script-error/371086/36

    player = new YT.Player(video, {
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      },
      height: 360,
      host: "https://www.youtube-nocookie.com",
      playerVars: {
        autoplay: 0,
        controls: 1,
        loop: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        playlist
      },
      width: 640
    });

That doesn’t work for us though because width and height are separated a long way from each other.

Because I want to maintain some logical order to the properties, we can define them separately in the config object.

    const playlist = "M7lc1UVf-VE";
    const config = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      width: 640
    };
    config.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      loop: 1,
      playlist,
      rel: 0
    };
    config.events = {
      "onReady": onPlayerReady,
      "onStateChange": onPlayerStateChange
    };
    player = new YT.Player(video, config);

Topic		Replies	Views
Trying to get Shuffle Playlist to work JavaScript	102	12634	December 27, 2018
Why is playVideo() not in the code? JavaScript	118	10717	August 19, 2021
Removing addRandom and arrays from the multiplayer code JavaScript	40	2877	September 20, 2021
Adding Const defaultPlayerVars = JavaScript	26	5296	August 23, 2021
Questions about the YouTube player_api code JavaScript	276	9681	December 28, 2018

Playing YouTube videos from an array

Related topics