YouTube se ha convertido en la forma estándar de ofrecer videos de alta calidad en la web. A veces, cuando inserta un video en su aplicación web o página de destino, necesita un gran control sobre qué y cómo se muestra. Es por eso que le mostraremos cómo puede usar la API del reproductor JavaScript de YouTube.
Inicializar el reproductor
El primer paso es agregar un marcador de posición 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 está completamente cargada, busca una función global llamada onYouTubeIframeAPIReady() que debes definir. Dentro de él crearemos una nueva instancia del reproductor de YouTube. El primer argumento es el id de un elemento HTML que queremos que sea reemplazado por el reproductor, en nuestro caso es video-placeholder . El segundo es un objeto que contiene las opciones del jugador:
- La anchura y la altura del reproductor. Estos se pueden sobrescribir aplicando CSS a #video-placeholder.
- La identificación del video que queremos incrustar cuando se carga el reproductor. Puede obtener esta identificación de cualquier enlace de YouTube tomando la cadena después de ?v=(por ejemplo, youtube.com/watch?v=WwoKkq685Hk )
- El jugadorVars objeto es un conjunto de parámetros. Hicimos que el color del reproductor fuera blanco y creamos una lista de reproducción proporcionando dos identificadores de videos adicionales, separados por una coma. Puede ver una lista de todas las propiedades disponibles aquí.
- Los eventos El objeto consta de detectores de eventos y las funciones a las que llaman. La API transmite un evento objeto como el único atributo, que contiene el objetivo y los datos. Puede leer más sobre los eventos aquí.
El código completo se parece a esto:
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
}
});
}
El initialize() La función se llamará cuando el reproductor se cargue por completo. Comenzará 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)
} Mostrar la hora actual y la duración del video
Esto lo hace el updateTimerDisplay() , una de las funciones llamadas cada segundo. Aprovecha los métodos de la API para brindarnos información adecuada sobre la duración del video.
// 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;
}
Los métodos se llaman usando el reproductor objeto que creamos al principio. Podemos obtener cuántos segundos en el video estamos con getCurrentTime() y la duración total del video con getDuration()
Barra de progreso
Esto se hace usando el player.seekTo(sec) función, que salta el vídeo a los segundos proporcionados en el parámetro.
Para demostrar esto, creamos nuestra propia versión de la barra de progreso de YouTube, utilizando un campo de entrada de tipo rango. Cuando hacemos clic en cualquier lugar, tomamos el valor de entrada, que nos da un porcentaje. Luego usamos este porcentaje para calcular el progreso que queremos hacer en el video y saltamos a los segundos correspondientes.
$('#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 video, pero también queremos que la barra de progreso se mueva automáticamente a medida que avanza el video. Para entender cómo hacemos esto, regrese al initialize() y más específicamente su intervalo de cada 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
Nada fuera de lo común aquí. Simplemente haga dos botones y 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 alternancia de silencio utilizando los métodos getter y setter proporcionados por el 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 establecer el volumen usando un porcentaje, podemos usar un campo de entrada de número y el setVolume() método. Validará automáticamente el parámetro proporcionado, por lo que no tenemos que preocuparnos por pasarle valores flotantes o números fuera del intervalo [0 :100].
$('#volume-input').on('change', function () {
player.setVolume($(this).val());
}); Otras configuraciones del jugador
Cambiar la velocidad de reproducción
El player.setPlaybackRate() El método espera uno de los siguientes como su parámetro:
- 0,25
- 0,5
- 1
- 1,5
- 2
Crea un <select> en el HTML y establezca las velocidades como <option> niños. La interacción del usuario con la selección dará como resultado un cambio en la tasa de velocidad solo para el video que se está reproduciendo actualmente y se restablecerá al valor predeterminado (velocidad de 1) cuando comience el siguiente.
$('#speed').on('change', function () {
player.setPlaybackRate($(this).val());
}); Cambiar la calidad del video
La alteración de la calidad del video funciona de manera muy similar a la alteración de la velocidad. El método para esto es setPlaybackQuality() y el argumento que espera es una de estas cadenas:
- alta resolución
- hd1080
- hd720
- grande
- medio
- pequeño
Tenga en cuenta que esta función solo sugiere qué calidad debe usarse, ya que depende en gran medida de la conexión a Internet y del video en sí.
$('#quality').on('change', function () {
player.setPlaybackQuality($(this).val());
}); Listas de reproducción
Podemos reproducir el video siguiente o anterior en una lista de reproducción utilizando estos métodos de la API.
$('#next').on('click', function () {
player.nextVideo()
});
$('#prev').on('click', function () {
player.previousVideo()
});
Si desea reproducir un video específico de la lista de reproducción, use player.playVideoAt(index) , donde índice es un número entero que especifica qué video reproducir, siendo 0 el primero.
Vídeo en cola dinámicamente
Lo último que vamos a demostrar es cómo agregar dinámicamente nuevos videos al reproductor. Si revisa nuestra demostración, en la parte inferior verá tres miniaturas de videos de gatos. Agregamos sus enlaces de YouTube como atributos de datos y cuando se hace clic en cualquiera de ellos, el video elegido se cargará en el reproductor.
$('.thumbnail').on('click', function () {
var url = $(this).attr('data-video-id');
player.cueVideoById(url);
}); Conclusión
¡Esto concluye nuestro tutorial! Esperamos que este tutorial le haya resultado útil. Si desea obtener más información sobre la API de YouTube, consulte estos recursos:
- Referencia de la API del reproductor iframe de YouTube:aquí.
- Parámetros compatibles con el reproductor de YouTube:aquí.
- YouTube Developers Live:personalización del reproductor web integrado:aquí.