Cómo controlar el Reproductor de vídeos de YouTube con JavaScript

YouTube se ha convertido en la forma estándar para la entrega de vídeo de alta calidad en la web. Muchas veces, cuando incrustamos un vídeo en la nuestra aplicación web o página de destino, se necesita un gran control sobre qué y cómo se mostrarla. Por eso mostraremos cómo controlar el reproductor de YouTube con JavaScript.

Inicializando el reproductor

El primer paso es agregar un placeholder para el player e incluir la API de YouTube.

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

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

Cuando la API está totalmente cargado, busca una función global llamada onYouTubeIframeAPIReady() que se debe definir. Dentro de ella vamos a crear una nueva instancia del reproductor de YouTube. El primer argumento es el id de un elemento HTML que queremos ser reemplazado por el reproductor, en nuestro caso, que es el vídeo-placeholder de posición. El segundo es un objeto que contiene las opciones del reproductor:

  1. La anchura y la altura del reproductor. Estos se pueden sobrescribir mediante la aplicación de CSS para #vídeo-placeholder.
  2. El id del vídeo que queremos incrustar cuando se carga el reproductor. Usted puede obtener este id de cualquier enlace de YouTube mediante la adopción de la cadena después de ?v= (por ejemplo youtube.com/watch?v=bdKVVZYefDI)
  3. El objeto playerVars es un conjunto de parámetros. El color del player es blanco y se creó una lista de reproducción, proporcionando dos videos adicionales, separados por coma. Si desea puede ver una lista de todas las propiedades disponibles aquí.
  4. El objeto eventos consta de detectores de eventos y las funciones que las llaman. La API pasa por un objeto de evento como el único atributo que contiene el destino y los datos. Puedes leer más acerca de los eventos aquí.

Nuestro código quedaría algo como esto:

var player;

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

La función initialize() será llamada cuando el player esté completamente cargado. Se iniciará un intervalo, actualizando algunos de nuestros controles cada segundo.

function initialize(){

    //Actualizar el control de carga
    updateTimerDisplay();
    updateProgressBar();

    //desactiva cualquier intervalo antiguo.
    clearInterval(time_update_interval);

    //Comience intervalo para actualizar la pantalla del tiempo transcurrido y
    //la parte transcurrido de la barra de progreso de cada segundo.
    time_update_interval = setInterval(function () {
        updateTimerDisplay();
        updateProgressBar();
    }, 1000)

}

Mostrando la hora y duración del video..

Esto se hace por el updateTimerDisplay(), uno de la función llamada cada segundo. Se aprovecha de los métodos de la API para darnos una información adecuada acerca de la duración del vídeo.

// Esta funcio es llamada por initialize()
function updateTimerDisplay(){
    //Actualización y visualización de tiempo.
    $('#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;
}

Podemos conseguir el número de segundos en el vídeo que estamos en con GetCurrentTime(), y la duración total del vídeo con getDuration().

Barra de progreso.

Esto se hace usando la player.seekTo(sec) función, que salta el vídeo a los segundos proporcionadas en el parámetro.

Para esta demostración crearemos una barra de progreso, con un campo inpu de type range. Cuando hacemos clic en cualquier parte de ella, se toma el valor del input, y nos devuelve un porcentaje. A continuación, utilizamos este porcentaje para calcular el progreso que queriamos hacer para el vídeo y avanzar a los segundos acordados.

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

    //calculamos el nuevo tiempo del video.
    //nuevo tiempo en segundos = total de duracion en segundos * ( valor de range input / 100 )
    var newTime = player.getDuration() * (e.target.value / 100);

    //Avanzamos el video al nuevo tiempo.
    player.seekTo(newTime);

});

El código anterior nos permite controlar el vídeo, pero también queremos mover la barra de progreso automáticamente a medida que el video avanza. Para entender cómo hacemos esto, regresamos a la función initialize() y más concretamente su intervalo de cada segundo y UpdateProgressBar().

//Esta funcion es llamada por initialize()
function updateProgressBar(){
    // Actualizamos el valor de nuestra barra de progreso acordado.
    $('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
}

Controles de reproducción

Nada fuera de lo común aquí. Sólo asegúrese de dos botones y llamar 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 activación de silencio utilizando los métodos getter y setter del player para obtener una idea visita este video.

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

    if(player.isMuted()){
        player.unMute();
        mute_toggle.text('volumen_up');
    }
    else{
        player.mute();
        mute_toggle.text('volumen_off');
    }
});

Si queremos ajustar el volumen con un porcentaje podemos utilizar un campo type: número y el método setVolume(). Se validará automáticamente el parámetro proporcionado, por lo que no tiene que preocuparse de pasar valores o números que flotan fuera del intervalo [0: 100] .

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

Otras configuraciones del reproductor

Cambiar la velocidad de reproducción

El método player.setPlaybackRate() espera uno de los siguientes parámetro cómo:

0.25
0.5
1
15
2

Crear un elemento <select> en el HTML y establecer las velocidades como el <option> . La interacción del usuario con el selectivo se traducirá en el cambio de la tasa de velocidad sólo para el video que se está reproduciendo y se restablecerá el valor predeterminado (velocidad de 1) cuando el siguiente comienza.

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

Cambio de la calidad de vídeo

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

highres
hd1080
hd720
large
medium
small

Tenga en cuenta que esta función sólo sugiere calidad de video a ser utilizado y es muy dependiente de la conexión a Internet y vídeo en sí.

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

Listas de reproducción

Podemos jugar con la lista de reproducción usando los métodos de la API.

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

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

Cola de vídeo dinámicamente.

Lo último que vamos a demostrar, es cómo agregar dinámicamente nuevos vídeos para el reproductor. Verifique el demo, en la parte inferior verás tres thumb de vídeos . Hemos añadido sus enlaces de YouTube como data-attributes y cuando hacemos clic en cualquiera, el video elegido será cargado en el reproductor.

$('.thumbnail').on('click', function () {

    var url = $(this).attr('data-video-id');

    player.cueVideoById(url);

});

Espero les sea de utilidad y les sirva en algo, si deseas ,as información visita:

YouTube Iframe Player API – clic aquí.
YouTube para´metros del reproductor – clic aquí.
YouTube Developers en vivo videos: –clic aquí.

DEMOSTRACIÓN

Relacionado