You will notice that clicking on the play button too soon, and nothing happens. https://jsfiddle.net/jksoe8up/
How the code works is: As soon as a video has loaded, you can click on the cover / play button to start playing.
Here is a timer I added to the code.
I want to find out how many milliseconds it takes until YouTube is ready.
I want the timer to stop on its own when YouTube is ready.
How am I able to do that in the code?
In my code there is a timer on the screen that starts on page load, what I want to happen is, for the timer to stop on its own when YouTube is ready.
// Interval
var interval;
// Counter
var enterDate = new Date();
function secondsSinceEnter() {
return (new Date() - enterDate) / 1000;
}
// Event function
function evtFct() {
var sec = secondsSinceEnter().toFixed(3);
if (sec < 10)
document.querySelector('button').innerText = sec + " seconds";
else
document.querySelector('button').innerText = 'You are here like for eternity';
}
// Add interval to keep the current time uptodate
interval = setInterval(evtFct, 0); // Call evtFct every tick
// Usage example
document.querySelector('button').onclick = function () {
evtFct();
clearInterval(interval); // Disable interval
}
// Interval
var interval;
// Counter
var enterDate = new Date();
function secondsSinceEnter()
{
return (new Date() - enterDate) / 1000;
}
// Event function
function evtFct()
{
var sec = secondsSinceEnter().toFixed(3);
if (sec < 10)
document.querySelector('button').innerText = sec + " seconds";
else
document.querySelector('button').innerText = 'You are here like for eternity';
}
// Add interval to keep the current time uptodate
interval = setInterval(evtFct, 0); // Call evtFct every tick
// Usage example
document.querySelector('button').onclick = function()
{
evtFct();
clearInterval(interval); // Disable interval
}
const manageCover = (function makeManageCover() {
const events = {};
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function openCurtain(cover) {
hide(cover);
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
return curtain;
}
function showVideo(curtain) {
const thewrap = curtain.parentElement.querySelector(".wrap");
show(thewrap);
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const curtain = openCurtain(cover);
showVideo(curtain);
cover.dispatchEvent(events.afterClickCover);
}
function init(callback) {
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
events.afterClickCover = new Event("afterClickCover");
cover.addEventListener("afterClickCover", callback);
}
return {
init
};
}());
const videoPlayer = (function makeVideoPlayer() {
const events = {};
const eventHandlers = {};
let player = null;
function loadIframeScript() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
function onYouTubeIframeAPIReady() {
const cover = document.querySelector(".play");
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
videoPlayer.addPlayer(frameContainer);
}
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerReady(event) {
player = event.target;
player.setVolume(100);
shufflePlaylist(player);
const iframe = player.h;
iframe.dispatchEvent(events.afterPlayerReady);
}
function addPlayer(video) {
const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";
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
};
player = new YT.Player(video, config);
const iframe = player.h;
const eventHandler = eventHandlers.afterPlayerReady;
iframe.addEventListener("afterPlayerReady", eventHandler);
}
function play() {
player.playVideo();
}
function addEvents(handlers) {
eventHandlers.afterPlayerReady = handlers.afterPlayerReady;
events.afterPlayerReady = new Event("afterPlayerReady");
}
function init(initEventHandlers) {
addEvents(initEventHandlers);
loadIframeScript();
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
}
return {
addPlayer,
init,
play
};
}());
videoPlayer.init({
afterPlayerReady: function initCover() {
manageCover.init(function playVideo() {
videoPlayer.play();
});
}
});html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: white;
}
.container {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
display: flex;
}
.curtain {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid ;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
position: relative;
}
.curtain::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #0a0a0a ;
border: 1px solid;
border-color: #000 #101010 #000 #101010;
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
outline: 1px solid #333;
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*animation: fadeInVideo 0s 0s forwards;
opacity: 0;*/
}
/*@keyframes fadeInVideo {
100% {
opacity: 1;
}
}*/
iframe {
user-select: none;
}
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all 8s ease;
transition-delay:300ms;
/*background-image: url("https://picsum.photos/600");
background-size: cover;
background-repeat: no-repeat;
background-position: center;*/
overflow: hidden;
}
.panel-left {
left: 0;
/*background-color: rgb(91, 96, 106);*/
}
.panel-right {
right: 0;
/*background-color: rgb(229, 211, 211);*/
}
.panel-left::before,
.panel-right::before {
content: "";
position: absolute;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
background-size: cover;
background-repeat: no-repeat;
background-position: 0 0;
pointer-events: none;
}
.panel-right::before {
left: -100%;
}
.curtain.slide .panel-left {
/* transform: translateX(-100%);*/
transform: translateX(calc(-100% - 1px));
}
.panel-left::before {
background: rgba(0,0,0,0.5);
}
.curtain.slide .panel-right {
/*transform: translateX(100%);*/
transform: translateX(calc(100% + 1px));
}
.play {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid blue;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
color: white;
/*animation: fadeInPlay 3s ease 0s forwards;*/
/*animation: fadeInPlay 3s ease 3s forwards;*/
/*opacity: 0;*/
/* pointer-events: none;*/
}
/*@keyframes fadeInPlay {
100% {
pointer-events: initial;
opacity: 1;
}
}*/
.play::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid blue;
transform: translateX(4px);
}
.play:hover {
box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}
.play:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
.hide {
display: none;
}<div class="container">
<div class="curtain">
<div class="ratio-keeper">
<div class="wrap hide">
<div class="video video-frame"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="play" type="button" aria-label="Open"></button>
</div>