Documentación Herramientas principales M3u8 Player

Referencia de API

Referencia completa de la API del Reproductor M3U8 Online.

API del Reproductor

Inicialización

Constructor Player

const player = new M3U8Player(options);

Parámetros:

options (Object): Opciones de configuración del reproductor

Opciones de configuración:

const options = {
  container: '#player', // Selector del contenedor del reproductor
  autoplay: false, // Reproducción automática
  muted: true, // Estado silenciado
  preload: 'metadata', // Configuración de precarga
  width: '100%', // Ancho del reproductor
  height: 'auto', // Altura del reproductor
  controls: true, // Mostrar controles
  fluid: true, // Responsivo
  responsive: true, // Soporte responsivo
  playbackRates: [0.5, 1, 1.25, 1.5, 2], // Velocidades de reproducción
  defaultPlaybackRate: 1, // Velocidad de reproducción por defecto
  language: 'es', // Configuración de idioma
  techOrder: ['html5'], // Orden de prioridad de tecnologías
  html5: {
    vhs: {
      overrideNative: true, // Anular HLS nativo
      enableLowInitialPlaylist: true,
      smoothQualityChange: true,
      handlePartialData: true,
    },
  },
};

Métodos

load()

Carga un stream.

player.load(url);

Parámetros:

url (String): URL del stream M3U8

Valor de retorno:

Promise: Promise de carga completada

Ejemplo:

try {
  await player.load('https://example.com/stream.m3u8');
  console.log('Stream cargado exitosamente');
} catch (error) {
  console.error('Error al cargar el stream:', error);
}

play()

Inicia la reproducción.

player.play();

Valor de retorno:

Promise: Promise de inicio de reproducción

pause()

Pausa la reproducción.

player.pause();

currentTime()

Obtiene o establece el tiempo de reproducción actual.

// Obtener tiempo actual
const currentTime = player.currentTime();

// Establecer tiempo
player.currentTime(120); // Establecer a 2 minutos

duration()

Obtiene la duración total del stream.

const duration = player.duration();

volume()

Obtiene o establece el volumen.

// Obtener volumen (0.0 - 1.0)
const volume = player.volume();

// Establecer volumen
player.volume(0.5); // Establecer al 50%

muted()

Obtiene o establece el estado silenciado.

// Obtener estado silenciado
const isMuted = player.muted();

// Establecer estado silenciado
player.muted(true); // Silenciar
player.muted(false); // Desilenciar

paused()

Obtiene el estado de pausa.

const isPaused = player.paused();

ended()

Obtiene el estado de finalización.

const isEnded = player.ended();

readyState()

Obtiene el estado de preparación del reproductor.

const readyState = player.readyState();

Valores de retorno:

0: HAVE_NOTHING - Sin información
1: HAVE_METADATA - Con metadatos
2: HAVE_CURRENT_DATA - Con datos de frame actual
3: HAVE_FUTURE_DATA - Con datos de frame futuro
4: HAVE_ENOUGH_DATA - Con datos suficientes

networkState()

Obtiene el estado de la red.

const networkState = player.networkState();

Valores de retorno:

0: NETWORK_EMPTY - Estado inicial
1: NETWORK_IDLE - Estado inactivo
2: NETWORK_LOADING - Cargando
3: NETWORK_NO_SOURCE - Sin fuente

Eventos

loadstart

Se dispara cuando comienza la carga del stream.

player.on('loadstart', () => {
  console.log('Iniciando carga del stream');
});

loadedmetadata

Se dispara cuando se cargan los metadatos.

player.on('loadedmetadata', () => {
  console.log('Metadatos cargados');
  console.log('Duración:', player.duration());
});

loadeddata

Se dispara cuando se carga el primer frame.

player.on('loadeddata', () => {
  console.log('Primer frame cargado');
});

canplay

Se dispara cuando es posible reproducir.

player.on('canplay', () => {
  console.log('Listo para reproducir');
});

canplaythrough

Se dispara cuando el buffering está completo y es posible reproducir hasta el final.

player.on('canplaythrough', () => {
  console.log('Listo para reproducir hasta el final');
});

play

Se dispara cuando comienza la reproducción.

player.on('play', () => {
  console.log('Reproducción iniciada');
});

pause

Se dispara cuando se pausa la reproducción.

player.on('pause', () => {
  console.log('Reproducción pausada');
});

ended

Se dispara cuando termina la reproducción.

player.on('ended', () => {
  console.log('Reproducción terminada');
});

timeupdate

Se dispara cuando se actualiza el tiempo de reproducción.

player.on('timeupdate', () => {
  const currentTime = player.currentTime();
  const duration = player.duration();
  const progress = (currentTime / duration) * 100;
  console.log(`Progreso: ${progress.toFixed(1)}%`);
});

volumechange

Se dispara cuando cambia el volumen.

player.on('volumechange', () => {
  console.log('Volumen:', player.volume());
  console.log('Silenciado:', player.muted());
});

error

Se dispara cuando ocurre un error.

player.on('error', (error) => {
  console.error('Error del reproductor:', error);
});

API HLS

Propiedades

hls

Accede a la instancia HLS.

const hls = player.hls;

hls.levels

Obtiene los niveles de calidad disponibles.

const levels = player.hls.levels;
console.log('Niveles de calidad disponibles:', levels);

hls.currentLevel

Obtiene o establece el nivel de calidad actual.

// Obtener nivel actual
const currentLevel = player.hls.currentLevel;

// Establecer nivel
player.hls.currentLevel = 2; // Establecer al tercer nivel

hls.nextLevel

Obtiene o establece el siguiente nivel de calidad.

const nextLevel = player.hls.nextLevel;

hls.loadLevel

Obtiene el nivel de calidad que se está cargando.

const loadLevel = player.hls.loadLevel;

hls.bandwidth

Obtiene el ancho de banda estimado.

const bandwidth = player.hls.bandwidth;
console.log('Ancho de banda estimado:', bandwidth, 'bps');

hls.startLevel

Obtiene o establece el nivel de calidad inicial.

// Establecer nivel inicial
player.hls.startLevel = 1;

Métodos

hls.startLoad()

Inicia la carga HLS.

player.hls.startLoad();

hls.stopLoad()

Detiene la carga HLS.

player.hls.stopLoad();

hls.swapAudioCodec()

Intercambia el códec de audio.

player.hls.swapAudioCodec();

hls.recoverMediaError()

Intenta recuperarse de un error de medios.

player.hls.recoverMediaError();

Eventos

hlsEvent

Monitorea eventos relacionados con HLS.

player.on('hlsEvent', (event, data) => {
  console.log('Evento HLS:', event, data);
});

levelLoaded

Se dispara cuando se carga un nivel de calidad.

player.on('levelLoaded', (event, data) => {
  console.log('Nivel de calidad cargado:', data);
});

levelSwitched

Se dispara cuando cambia el nivel de calidad.

player.on('levelSwitched', (event, data) => {
  console.log('Nivel de calidad cambiado:', data);
});

fragLoaded

Se dispara cuando se carga un fragmento.

player.on('fragLoaded', (event, data) => {
  console.log('Fragmento cargado:', data);
});

API de Eventos

Agregar Escuchadores de Eventos

on()

Agrega un escuchador de eventos.

player.on('eventName', callback);

Parámetros:

eventName (String): Nombre del evento
callback (Function): Función de callback

off()

Elimina un escuchador de eventos.

player.off('eventName', callback);

one()

Agrega un escuchador de eventos que se ejecuta una sola vez.

player.one('eventName', callback);

trigger()

Dispara un evento manualmente.

player.trigger('customEvent', data);

Eventos Personalizados

qualitychange

Se dispara cuando cambia la calidad.

player.on('qualitychange', (event, data) => {
  console.log('Cambio de calidad:', {
    from: data.from,
    to: data.to,
    reason: data.reason,
  });
});

bufferwarning

Se dispara cuando el buffer está bajo.

player.on('bufferwarning', (event, data) => {
  console.log('Advertencia de buffer:', data);
});

Manejo de Errores

Tipos de Error

MediaError

Error relacionado con medios.

player.on('error', (error) => {
  if (error.code === 1) {
    console.log('Error de medios: Abortado');
  } else if (error.code === 2) {
    console.log('Error de medios: Red');
  } else if (error.code === 3) {
    console.log('Error de medios: Decodificación');
  } else if (error.code === 4) {
    console.log('Error de medios: Fuente no soportada');
  }
});

HlsError

Error relacionado con HLS.

player.on('error', (error) => {
  if (error.type === 'networkError') {
    console.log('Error de red');
  } else if (error.type === 'mediaError') {
    console.log('Error de medios');
  }
});

Recuperación de Errores

Recuperación Automática

El reproductor intenta automáticamente recuperarse de errores.

player.on('error', (error) => {
  console.log('Error ocurrido:', error);
  // El reproductor intenta automáticamente recuperarse
});

Recuperación Manual

Puedes intentar recuperarte manualmente de errores.

player.on('error', (error) => {
  if (error.type === 'mediaError') {
    // Para errores de medios, intentar recuperación manual
    player.hls.recoverMediaError();
  }
});

Funciones de Utilidad

Formato de Tiempo

formatTime()

Convierte segundos a formato de tiempo.

function formatTime(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);

  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  } else {
    return `${minutes}:${secs.toString().padStart(2, '0')}`;
  }
}

// Ejemplo de uso
const currentTime = player.currentTime();
console.log('Tiempo actual:', formatTime(currentTime));

Gestión de Niveles de Calidad

getQualityLevels()

Obtiene los niveles de calidad disponibles.

function getQualityLevels() {
  return player.hls.levels.map((level, index) => ({
    index: index,
    height: level.height,
    width: level.width,
    bitrate: level.bitrate,
    name: `${level.height}p`,
  }));
}

const qualityLevels = getQualityLevels();
console.log('Niveles de calidad disponibles:', qualityLevels);

setQualityLevel()

Establece el nivel de calidad.

function setQualityLevel(levelIndex) {
  if (levelIndex >= 0 && levelIndex < player.hls.levels.length) {
    player.hls.currentLevel = levelIndex;
    console.log(`Nivel de calidad establecido a ${levelIndex}`);
  } else {
    console.error('Nivel de calidad inválido');
  }
}

Esta referencia de API te permite aprovechar todas las funcionalidades del Reproductor M3U8 Online.

¿Te resultó útil esta página?

On this page

API del Reproductor API HLS API de Eventos Manejo de Errores Funciones de Utilidad