Так, я насчитал 3 правильных ответа и действительно, в таком случае нам нужно использовать Promise.all()

На самом деле, не совсем частый гость в коде, но весьма полезный и про который вы не должны забывать. Вся инфа: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise/all



Но по простому, мы в него можем закинуть массив промисов и выполнить какое-либо действие только в том случае, когда все промисы выполнились 💪



Давайте посмотрим на исходный код. Подумайте, как можно применить это знание, чтобы все сработало правильно) Код не мой, орфография остается на совести автора 😂



window.addEventListener('DOMContentLoaded', () => {



const videoPlayer = document.querySelectorAll('.js-player');



if (videoPlayer.length === 0) return;



// Загружаем наши файлы для видеоплеера

includeStyle("https://cdn.plyr.io/3.6.2/plyr.css");

includeScript("https://cdn.plyr.io/3.6.2/plyr.polyfilled.js");





// Создаем массив из элементов плеера

// Вот это действие нужно выполнить после загрузки скрипта/стилей

const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));





// Функция для добавления CSS

function includeStyle(url) {

return new Promise((resolve, reject) => {

let link = document.createElement('link');

link.type = 'text/css';

link.rel = 'stylesheet';

link.onload = function () {

resolve();

};

link.href = url;



let headScript = document.querySelector('script');

headScript.parentNode.insertBefore(link, headScript);

});

};



// Функция для добавления JS

function includeScript(src) {

return new Promise((resolve, reject) => {

let s = document.createElement('script');

s.src = src;

s.async = false;

s.type = 'text/javascript';

s.onload = arguments[1] || function () {

resolve();

};

s.onreadystatechange = function () {

if (this.readyState == 'complete' && typeof (this.onload) == 'function') {

this.onload();

}

};

document.getElementsByTagName('head')[0].appendChild(s);

return s;

});

}

});