How can we have it pick 1 video out of the array and play it without it being a playlist?
Can that be done?
Pick one out beforehand and give only that 1 to addPlayer.
The YouTube player will pick one on its own and play it.
That can be done?
I don’t want to tell it what to play.
The YouTube player starts and plays 1 video from the given array, and after that one song, that is it.
The youtube player doesn’t know how to play one at random. It can take a playlist and shuffle it, but that’s all. If you want only a single one to be played at random, that’s on us to pick out that random song and tell youtube to play it.
This piece allows 1 video at random, and that’s all.
The only issue here is that it may not be compatible with playlist.
const videoID = ["0dgNc5S8cLI", "2VwsvrPFr9w"];
const index = Math.floor(Math.random() * videoID.length);
function addPlayer (videos){
const config = {
height: 360,
host: "https://www.youtube-nocookie.com",
videoId: videoID[index],
width: 640
};
Let me know when you want to know more about my solution to all of this.
I want to know your solution.
My solution is to have another videoPlayer method called addPlayerRandomVideo, that picks out a random video from the list and passes it to addPlayer.
Do you want to know more?
1 Like
Absolutely!!!
Yes please.
Below addPlayer we have another function called addPlayerRandomVideo.
I was thinking of calling it addRandomPlayer, but then that implies that the player itself is random when instead it’s the video that’s random. So right now it’s addPlayerRandomVideo.
function addPlayer(video, videoIds) {
...
}
function addPlayerRandomVideo(video, videoIds) {
const index = Math.floor(Math.random() * videoIds.length);
return addPlayer(video, videoIds[index]);
}
We return that addPlayerRandomVideo in the list of returns.
return {
addPlayer,
addPlayerRandomVideo,
init,
play
};
That way everything keeps on working as it normally does, and you can use either addPlayer or addPlayerRandomVideo to add a player.
videoPlayer.addPlayerRandomVideo(frameContainer, videos);
The code at https://jsitor.com/SEWXsfQOf7 has been updated.
1 Like
Thank you.
It is difficult to keep things simple. Sometimes it’s only achieved by recognising what is complex, which can be tricky at times. My experience with tests though has taught me that keeping things simple often means ensuring that we still keep things working, while improving their abilities to do things.
1 Like
Would I be able to add that functionality to the multiplayer?
Allowing .playa to be able to pick a song out of an array and play it?
Will that be difficult to do?
1 Like
Maybe something like this, I’m not sure.
managePlayer.add(".playa", {
height: 207,
start: 4,
width: 277
const videos = [
"0dgNc5S8cLI",
"mnfmQe8Mv1g",
"-Xgi_way56U",
"CHahce95B1g"
];
});
Comparing that code to this one:
In yours, how come there is so much code that is needed?
https://jsfiddle.net/eLkg3xa5/
const videoID = [
"0dgNc5S8cLI",
"mnfmQe8Mv1g",
"-Xgi_way56U",
"CHahce95B1g"
];
const index = Math.floor(Math.random() * videoID.length);
function addPlayer(videos) {
const config = {
height: 360,
host: "https://www.youtube-nocookie.com",
videoId: videoID[index],
width: 640
};
That’s because I am wanting to ensure that only the one set of videoPlayer code works for everything.
I’ll take a look at the code at https://jsitor.com/OX7GlFnem
The addPlayer code doesn’t yet support single and multiple videos, so that’s the first thing to get updated.
function addPlayer(video, settings, videoIds) {
const videoId = !Array.isArray(videoIds) && videoIds;
const playlist = Array.isArray(videoIds) && videoIds;
A mistake has occurred with assigning playerOptions:
const playerOptions = Object.assign(defaults.playerOptions, settings);
The mistake is that defaults.playerOptions gets overwritten. We need to stop that by starting with an empty object instead.
const playerOptions = Object.assign({}, defaults.playerOptions, settings);
The first parameter of Object.assign actually gets changed. What is happening there can be expressed as: “Assign to the first parameter, all the things from the following parameters.”
The playerVars from settings also clobbers the default playerVars, so we need to updated that too.
const defaultOptions = defaults.playerOptions;
const defaultVars = defaultOptions.playerVars;
const playerVars = settings.playerVars;
const playerOptions = Object.assign({}, defaultOptions, settings);
playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);
It is in the managePlayer code that it’s more appropriate to check if no videoIds are given, and get it from the dataset instead.
function createPlayer(videoWrapper, settings = {}, videoIds = "") {
const video = videoWrapper.querySelector(".video");
if (!videoIds) {
videoIds = video.dataset.id;
}
const playerOptions = createPlayerOptions(settings);
return videoPlayer.addPlayer(video, playerOptions, videoIds);
}
We then need to ensure that when we give a list of videos:
managePlayer.add(".playa", {
height: 207,
start: 4,
width: 277
}[
"0dgNc5S8cLI",
"mnfmQe8Mv1g",
"-Xgi_way56U",
"CHahce95B1g"
]);
that the list gets through to createPlayer
function createCoverClickHandler(playerSettings, videoIds) {
...
const player = createPlayer(wrapper, playerSettings, videoIds);
...
};
}
function addPlayer(coverSelector, playerSettings, videoIds) {
const clickHandler = createCoverClickHandler(playerSettings, videoIds);
...
}
For the random video we want to tell managePlayer to add a random one. That means instead of using add, we also have addRandom.
managePlayer.addRandom(".playa", {
height: 207,
start: 4,
width: 277
}[
"0dgNc5S8cLI",
"mnfmQe8Mv1g",
"-Xgi_way56U",
"CHahce95B1g"
]);
And we’ve found a better place to deal with adding a random video. Not in the videoPlayer code, but in the supporting managePlayer code instead.
function addPlayerRandomVideo(coverSelector, playerSettings, videoIds) {
const index = Math.floor(Math.random() * videoIds.length);
const videoId = videoIds[index];
const clickHandler = createCoverClickHandler(playerSettings, videoId);
manageCover.addCoverHandler(coverSelector, clickHandler);
}
...
return {
add: addPlayer,
addRandom: addPlayerRandomVideo,
init
};
The updated code that lets you use managePlayer.add or managePlayer.addRandom is at https://jsitor.com/OX7GlFnem
1 Like
Something you would add in if you want to use it.
Something like this.
This might not be possible though.
const index = Math.floor(Math.random() * videoID.length);
managePlayer.add(".playa", {
height: 207,
start: 4,
videoId: videoID[index],
width: 277
}[
const videoID = [
"0dgNc5S8cLI",
"mnfmQe8Mv1g",
"-Xgi_way56U",
"CHahce95B1g"
];
Hell no, that’s quite the wrong place to use it. It’s far better to codify that kind of behaviour inside of well-named methods of managePlayer.
1 Like