When autoplay is on 1:
video starts playing through the cover.
Should that be happening?
That’s what autoplay:1 does, it automatically plays the youtube video.
Set it to 0 and it doesn’t automatically play the video. That way you can then later on tell the video to play, such as when someone clicks on the cover.
1 Like
How would this code be done?
This one seems more difficult.
https://jsfiddle.net/6wLmhu8a/1/
const videoPlayer = (function makeVideoPlayer() {
"use strict";
const players = [];
let playerVars = {};
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100); // percent
}
let hasShuffled = false;
function onPlayerStateChange(event) {
const player = event.target;
if (!hasShuffled) {
player.setShuffle(true);
player.playVideoAt(0);
hasShuffled = true;
}
if (event.data === YT.PlayerState.PLAYING) {
for (let i = 0; i < players.length; i++) {
if (players[i] !== event.target) players[i].pauseVideo();
}
}
if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
player.seekTo(playerVars.start);
}
}
function addVideo(video, settings) {
playerVars = Object.assign({
videoId: video.dataset.id,
host: "https://www.youtube-nocookie.com",
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
}, settings);
players.push(new YT.Player(video, playerVars));
}
function init(video, settings) {
YT.ready(function() {
addVideo(video, settings);
});
}
return {
init
};
}());
Yes it is, but things get easier when a lot of the duplication is removed.
I have a question.
If I remove the cover, the code still works.
https://jsfiddle.net/d2u1aqno/
Is it ok to remove it, or does it need to stay?
(function manageCover() {
"use strict";
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
}
const cover = document.querySelector(".jacket");
cover.addEventListener("click", coverClickHandler);
}());
That looks to be duplicate code. There’s other code at the bottom that hides the cover too.
I received an error on this one.
Uncaught TypeError: Cannot read property ‘playVideo’ of null"
This is the curtain player.
https://jsfiddle.net/b15k8742/6/
Delete this?
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.parentElement;
show(wrapper);
videoPlayer.play();
}
cover.addEventListener("click", coverClickHandler);
}());
In the onPlayerReady function, you have const player = ... so it only assigns it inside of that function.
The const needs to be removed so that it updates the let player variable in a parent scope instead.
function onPlayerReady(event) {
// const player = event.target;
player = event.target;
1 Like
The cover code is improved so that it supports a variety of different init techniques.
function init(coverOpts) { // "", [], {} or [{}, {}...]
if (Array.isArray(coverOpts)) {
initCovers(coverOpts);
} else if (coverOpts === Object(coverOpts)) {
initCover(coverOpts);
} else {
initCover({cover: coverOpts});
}
}
You can init a single cover:
manageCover.init(".jacket-left");
You can init multiple covers:
manageCover.init([
".jacket-left",
".jacket-middle",
".jacket-right"
]);
You can init a cover with additional show and hide selectors:
manageCover.init({cover: ".jacketd", show: ".wraph"});
And you can init multiple combinations at the same time:
manageCover.init([
[".jacket-left", ".jacket-middle"".jacket-right"],
".jacketc",
{cover: ".jacketd", show: ".wraph"}
]);
Aside from that though, the init section was removed from the videoPlayer code, and updated so that the addVideo function is made available from it instead. And, the loadPlayer parts at the bottom were put inside of the onYouTubeIframeAPIReady function.
1 Like
How come this wasn’t added to it?
Is that the next step?
let player = null;
function play() {
player.playVideo();
}
return {
addPlayer,
play
};
}());
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
videoPlayer.addPlayer(frameContainer);
}
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.parentElement;
show(wrapper);
videoPlayer.play();
}
Do things work without it? It seems that they do.
When autoplay is set to 0, the videos don’t start right away like with the others codes.
What is that functionality?
That’s it works here:
https://jsfiddle.net/71y52qa8/
When you set autoplay to 0, that is when play function becomes useful.
autoplay is set to 0 on both of these
Compare this code:
https://jsitor.com/3Yjovw1cth
To the 2 player code:
https://jsitor.com/zaW8K3pmC
There seems to be a communication problem because I’m not understanding what you want to achieve.
It must be break time for me.
What extra benefit is this, if I remove it, the code still works?
function onYouTubeIframeAPIReady() {
}
Shouldn’t it be attached to other code?
const wrapper = cover.nextElementSibling;
const frameContainer = wrapper.querySelector(".video");
videoPlayer.addPlayer(frameContainer);
From which code are you removing it?
The code in onYouTubeIframeAPIReady will normally work.
It doesn’t work when abnormal things occur, such as when iframe_api is slow to get going.
The onYouTubeIframeAPIReady function protects you from such things.
1 Like