Cómo controlar el reproductor de YouTube con Javascript

YouTube se ha convertido en la forma estándar de ver vídeos de alta calidad en Internet (sí, sabemos que hay más y con mucha mejor calidad, pero creemos que es la plataforma más extendida). A veces, cuando embebemos un vídeo en una página web, necesitamos más control sobre el qué se muestra y sobre el cómo se muestra. Es por eso que, en este artículo, vamos a mostrarte cómo sacarle todo el jugo a la API de Javascript del reproductor de Youtube.

Inicializando el reproductor

El primer paso es añadir un placeholder para el reproductor e incluir la API de YouTube.

<div id="video-placeholder"></div>

<script src="https://www.youtube.com/iframe_api"></script>

Cuando la API se ha cargado completamente, busca una función global llamada onYouTubeIframeAPIReady() que debes definir. Dentro de ella vamos a crear una nueva instancia del reproductor de YouTube. El primer argumento de la función es el id del elemento HTML que queremos que sea reemplazado por el reproductor, en nuestro caso, es el video-placeholder que hemos creado antes. El segundo será un objeto que contenga las opciones del reproductor:

  • La anchura y la altura del reproductor. Estos pueden ser sobreescritos aplicando reglas de CSS para el elemento #video-placeholder.
  • El id del vídeo que queremos incrustar cuando se cargue el reproductor. Puedes obtener este id de cualquier enlace de YouTube fijándote en lo que hay despues de ?v= (por ejemplo youtube.com/watch?v=WwoKkq685Hk)
  • El objeto playerVars es un conjunto de parámetros. Por ejemplo, haremos que el color del reproductor sea blanco y crearemos una playlist proporcionandole dos identificadores separados por coma. Puedes ver una lista de las propiedades disponibles aquí.
  • El objeto events consta de detectores de eventos y de las funciones a las cuales llaman. La API pasa un objeto event como único atributo que contiene el destino y los datos. Puedes leer más acerca de los eventos aquí.

Al final el código debería quedar tal que así:

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        width: 600,
        height: 400,
        videoId: 'Xa0Q0J5tOP0',
        playerVars: {
            color: 'white',
            playlist: 'taJ60kskkns,FG0fTKAqZ5g'
        },
        events: {
            onReady: initialize
        }
    });
}

Cuando esté completamente cargado se llamará a la función initialize(). Se iniciará un intervalo, actualizando algunos de nuestros controles cada segundo.

function initialize(){

    // Update the controls on load
    updateTimerDisplay();
    updateProgressBar();

    // Clear any old interval.
    clearInterval(time_update_interval);

    // Start interval to update elapsed time display and
    // the elapsed part of the progress bar every second.
    time_update_interval = setInterval(function () {
        updateTimerDisplay();
        updateProgressBar();
    }, 1000)

}

Mostrando el tiempo discurrido y la duración del vídeo

Esto se hace gracias a la función updateTimerDisplay(), uno de las funciónes a las que llamaremos a cada segundo. Se beneficia de los métodos de la API para proporcionarnos información sobre la duración del vídeo.

// This function is called by initialize()
function updateTimerDisplay(){
    // Update current time text display.
    $('#current-time').text(formatTime( player.getCurrentTime() ));
    $('#duration').text(formatTime( player.getDuration() ));
}

function formatTime(time){
    time = Math.round(time);

    var minutes = Math.floor(time / 60),
    seconds = time - minutes * 60;

    seconds = seconds < 10 ? '0' + seconds : seconds;

    return minutes + ":" + seconds;
}

A los métodos se les llama utilizando el objeto del reproductor que hemos creado anteriormente. Podemos obtener el número de segundos discurridos en el vídeo que estamos viendo mediante la función GetCurrentTime(), y la duración total del vídeo con getDuration(). Ambas funciones devolverán los segundos en formato de tiempo para luego escribirlos en el DOM.

Barra de progreso

Esto se lleva a cabo gracias a la función player.seekTo(seg), que salta a los segundos concretos del vídeo pasados por parámetro.

Para probar esto, hemos creado nuestra propia versión de la barra de progreso de YouTube, utilizando un input de tipo rango. Cuando hacemos clic en cualquier parte del control, coge el valor y nos retorna un porcentaje. Después, utilizamos ese porcentaje para calcularel progreso que queremos hacer al video y escapar a los segundos acordados.

$('#progress-bar').on('mouseup touchend', function (e) {

    // Calculate the new time for the video.
    // new time in seconds = total duration in seconds * ( value of range input / 100 )
    var newTime = player.getDuration() * (e.target.value / 100);

    // Skip video to new time.
    player.seekTo(newTime);

});

El código anterior nos permite controlar el vídeo, pero también queremos que la barra de progreso se mueva automáticamente a medida que el video avance. Para entender cómo hacer esto, vuelve a la función initialize() y más concretamente al intervalo por segundo y UpdateProgressBar().

// This function is called by initialize()
function updateProgressBar(){
    // Update the value of our progress bar accordingly.
    $('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
}

Controles de reproducción

Sólo asegúresate de mostrar los dos botones y de que se llame al método necesario al hacer clic.

$('#play').on('click', function () {
    player.playVideo();
});

$('#pause').on('click', function () {
    player.pauseVideo();
});

Opciones de sonido

Podemos crear un botón de silencio utilizando los métodos getter y setter del reproductor.

$('#mute-toggle').on('click', function() {
    var mute_toggle = $(this);

    if(player.isMuted()){
        player.unMute();
        mute_toggle.text('volume_up');
    }
    else{
        player.mute();
        mute_toggle.text('volume_off');
    }
});

Si queremos ajustar el volumen mediante un porcentaje, podemos utilizar un input numérico y el método setVolume(). Se comprobará automáticamente el parámetro proporcionado, por lo que no tienes que preocuparte de pasar valores float o números que fuera del intervalo [0: 100].

$('#volume-input').on('change', function () {
    player.setVolume($(this).val());
});

Otros ajustes del reproductor

Cambiar la velocidad de la reproducción

El método player.setPlaybackRate() espera uno de los siguientes valores como parámetro:

  • 0.25
  • 0.5
  • 1
  • 1.5
  • 2

Crea un elemento select en el HTML y establece las distintas velocidades en los option del select. La interacción del usuario con el select afectará en la tasa de velocidad del video que se está reproduciendo. Se restablecerá el valor predeterminado (velocidad 1) cuando el siguiente comience.

$('#speed').on('change', function () {
    player.setPlaybackRate($(this).val());
});

Cambio de la calidad del vídeo

La alteración de la calidad de vídeo funciona de manera muy similar a la de alterar la velocidad. El método para esto es setPlaybackQuality() y el argumento que espera es una de estas cadenas:

  • highres
  • 1080
  • hd720
  • large
  • medium
  • small

Ten en cuenta que esta función sólo sugiere qué calidad debe ser utilizada dependiendo de la conexión a Internet y del propio vídeo en sí.

Playlists

Podemos reproducir el siguiente vídeo o el anterior mediante una lista de reproducción (playlist) utilizando estos métodos que forman la API.

$('#next').on('click', function () {
    player.nextVideo()
});

$('#prev').on('click', function () {
    player.previousVideo()
});

Si quieres reproducir a un vídeo específico de la playlist, utiliza player.playVideoAt(index), donde index es un número entero que especifica al vídeo que quieres ir, siendo 0 el primero.

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP