Currently the loadPlayer function doesn’t actually load any players.
videoPlayer.onIframeReady = function loadPlayers() {
playerConfig.forEach(function (config) {
loadPlayer(config);
});
};
Instead, it configures the cover so that when it is clicked, a video player is added to that cover area. Instead of loading the player, it just initializes the cover so that eventually the cover will load the player. We should rename a few functions so that they more clearly express what is happening there.
Instead of loadPlayer, we can rename that to be initCover instead.
function initCover(opts) {
...
}
...
playerConfig.forEach(function (config) {
initCover(config);
});
With the first player, I’ll add config parameters called autoload and autoplay, to indicate that the player should be loaded immediately but not played.
{
autoplay: false,
height: 207,
target: ".jacket-left",
width: 277
},
It’s important that where us humans are configuring things frequently, that true and false be used to clearly indicate things.
Later on down in the code of initPlayer, that true/false can then be converted to what the computer needs instead.
if (opts.hasOwnProperty("autoplay")) {
opts.autoplay = (
opts.autoplay
? 1
: 0
);
}
settings.playerVars = opts;
videoPlayer.addPlayer(video, settings);
Removing playVideo from the onPlayerReady function:
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100); // percent
}
we should find that we can configure the first video to autoplay.
{
autoload: true,
autoplay: true,
height: 207,
target: ".jacket-left",
width: 277
},
and it does autoplay when we click the cover. Setting autoplay to false results in the clicked cover not autoplaying.
We might not even need to configure autoload in this code to make further beneficial progress.
The player config where we initialize each player is where we should be focusing on instead.
playerConfig.forEach(function (config) {
initCover(config);
});
We can add information to initCover so that it does or doesn’t autoplay, when no parameter is provided.
initCover(config, {
autoplay: true
});
Removing those auto properties from the first player now lets us carry on with this alternative solution:
{
height: 207,
target: ".jacket-left",
width: 277
}
In the initCover code, we can check for that autoplay config setting if one isn’t found on the player config.
function initCover(opts, config) {
...
if (opts.hasOwnProperty("autoplay")) {
opts.autoplay = (
opts.autoplay
? 1
: 0
);
} else if (config.hasOwnProperty("autoplay")) {
opts.autoplay = (
config.autoplay
? 1
: 0
);
}
There is though some obvious duplication in the above code, that we need to take care of. We can have a setAutoplay function that uses a state condition to set autoplay. Currently with the code, the videos all default to no autoplay, so we don’t need to worry about setting autoplay to 0.
function setAutoplay(obj, state) {
if (state) {
obj.autoplay = 1;
}
return obj;
}
...
if (opts.hasOwnProperty("autoplay")) {
setAutoplay(opts, opts.autoplay);
} else if (config.hasOwnProperty("autoplay")) {
setAutoplay(opts, config.autoplay);
}
Because the player config has three states (true, false, not present) and the initCover config has three states (true, false, not present) we need to make sure that all nine combinations of states work properly with this code.
I’ll use a nice visible checkmark to indicate whether each state works as expected.
Those states are:
playerConfig -> | autoplay: true | autoplay: false | no autoplay
initCover Config
autoplay: true autoplay ✔️ no autoplay ✔️ autoplay ✔️
autoplay: false autoplay ✔️ no autoplay ✔️ no autoplay ✔️
no autoplay autoplay ✔️ no autoplay ✔️ no autoplay ✔️
I’ve left the code with there being no autoplay on the individual player config, and autoplay being set on the defaultConfig when initCover is run at the end of the code.
The updated code is found at https://jsfiddle.net/143bq6zw/6/
That code can now be configured to handle any combination of autoplay states that you desire.