Tengo varias paginas web y en cada pagina solo cambio estas tres variables: IDYT, youtubeVideo, YTtime nada mas. Eventualmente, quiero escribir un archivo JS mediante el cual pueda importar una función que tome como entrada estas tres variables solo nada más.
En la página web actual, mis variables se definen de la siguiente manera:
let IDYT = ["player", "player1", "player2", "player3"]; let youtubeVideo = ["E-xMXv3L5L8", "qNifU_aQRio", "yXEcd0eGrpw", "y17RuWkWdn8"]; let YTtime = [456, 119, 7, 17];El resto del script es el siguiente y nunca cambiará en ninguna otra página web (¡Quiero escribir esto como una función que toma la entrada anterior!)
// 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. function Objects1(videoId1, startID1) { let object1 = { height: "315", width: "560", videoId: videoId1, playerVars: { autoplay: 0, loop: 1, start: startID1, // mute: 1, }, events: { onStateChange: onPlayerStateChange, }, }; return object1; } const players = []; function onYouTubeIframeAPIReady() { for (let index = 0; index < IDYT.length; index++) { element = IDYT[index]; object1 = Objects1(youtubeVideo[index], YTtime[index]); players.push(new YT.Player(element, object1)); } } // 5. The API calls this function when the player's state changes. // Here I set the "setPlaybackRate" value to "2". function onPlayerStateChange() { players.forEach((player) => player.setPlaybackRate(1.5)); }Me resulta muy difícil escribir esto en una función que pueda exportar para poder usarla en otras páginas web. ¿Puedes ayudarme a resolver esto?
Entonces, lo que hice fue copiar la fuente en un nuevo archivo JS. es decir, utilicé esta etiqueta fuente tag.src = "https://www.youtube.com/iframe_api";
Luego, debajo de este código, pegué el siguiente código
// 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. function Objects1(videoId1, startID1) { let object1 = { height: "315", width: "560", videoId: videoId1, playerVars: { autoplay: 0, loop: 1, start: startID1, // mute: 1, }, events: { onStateChange: onPlayerStateChange, }, }; return object1; } const players = []; function onYouTubeIframeAPIReady() { for (let index = 0; index < IDYT.length; index++) { element = IDYT[index]; object1 = Objects1(youtubeVideo[index], YTtime[index]); players.push(new YT.Player(element, object1)); } } // 5. The API calls this function when the player's state changes. // Here I set the "setPlaybackRate" value to "2". function onPlayerStateChange() { players.forEach((player) => player.setPlaybackRate(1.5)); } Lo almacené en YouTubeSetting.js y luego en mi archivo HTML
Escribí lo siguiente:
<script> let IDYT = ["player", "player1", "player2"]; let youtubeVideo = ["qz0aGYrrlhU", "1Rs2ND1ryYc", "TJF4ldO91n4"]; let YTtime = [1855, 870, 852]; // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement("script"); // tag.src = "https://www.youtube.com/iframe_api"; tag.src = "../JS/YouTubeSetting.js"; var firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); </script>Esto resolvió mi problema, pero espero que alguien pueda darme una mejor opción en el futuro.