Estoy construyendo una plataforma para la visualización simultánea de video multiusuario. Para lograr esto, estoy usando la API iframe de youtube que tiene una función loadNewVideoById que le permite actualizar el video dentro del objeto del reproductor y, por lo tanto, ver un nuevo video.

Construí mi propio control deslizante de tiempo que se supone que toma la duración del nuevo video e inicializa el atributo máximo del control deslizante de rango, que representa el tiempo.

Aquí está la función que está manejando esa parte.

 function initSliderAndTime() { setTimeout(() => { var durationInSeconds = player.getDuration() $('#time-slider').attr('max', player.getDuration().toString().match(/^-?\d+(?:\.\d{0,1})?/)[0]) $('#end-time')[0].innerText = calculateTimeFormat(durationInSeconds); }, 2000); }

que se llama en la función loadNewVideo (no desde youtube) que se llama cuando un usuario quiere ver un nuevo video.

 function loadNewVideo(videoId, unMute, startSeconds) { player.loadVideoById({videoId: videoId, startSeconds: startSeconds | 0, }); $('#video-input')[0].value = "https://www.youtube.com/watch?v=" + videoId; if(unMute) { player.unMute() $('#mute-unmute-btn').children().removeClass('fa-volume-xmark'); $('#mute-unmute-btn').children().addClass('fa-volume-high') } showVideoControls(); initSliderAndTime(); forwardingInterval = setInterval(function () { updateSliderAndTime() }, 100); }

Si no configuro un tiempo de espera lo suficientemente grande, la función del objeto getDuration no se carga lo suficientemente rápido y la función falla.

Youtube tiene una función OnReadyFuntion que se supone que maneja el reproductor cuando se crea. Desafortunadamente, esta función no se llama cuando se actualiza el reproductor, solo cuando se crea.

¿Cómo se puede reconfigurar esto para que ejecute la función initSlider cuando getDuration esté listo?

¡Cualquier ayuda es apreciada!