es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo implementar una transmisión en vivo utilizando HLS con html y js

04 Jun, 2023 Programación

Estoy implementando el streaming en vivo en mi reproductor de video HTML, pero no hay ninguna etiqueta para mostrar si el video en streaming está en vivo o no. Estoy usando HLS.js para esto. ¿Cómo puedo resolver este problema?

fluidPlayer(
        'hls-video',
        {
            layoutControls: {
                fillToContainer: false,
                autoPlay: true,
                title: 'Mi título de video',
            }
        }
    );

<script src="https://cdn.fluidplayer.com/3.0.0/fluidplayer.min.js"></script>
    <video id='hls-video' width="560" height="315" poster="">
        <source src="https://ottrbintl3.republicworld.com/httppush/ottrbintl_republic_hindi/chunklist_4.m3u8" type='application/x-mpegURL'>
    </video>
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar que el video en streaming es en vivo, puede usar la propiedad “live” del complemento HLS.js. Aquí le mostramos cómo puede modificar su código:

    fluidPlayer(
    'hls-video',
    {
        layoutControls: {
            fillToContainer: false,
            autoPlay: true,
            title: 'Título de mi video',
            hlsjs: {
                liveDurationInfinity: true,
                liveBackBufferLength: 300
            }
        }
    }
);

    Con estos parámetros agregados en el objeto hlsjs, el reproductor de video indicará que el video está en vivo. La propiedad liveDurationInfinity asegura que el indicador de en vivo permanezca indefinidamente y liveBackBufferLength establece el número de segundos de búfer de retroceso que se debe retener para videos en vivo.

    ¡Esperamos que esto le sea útil!

Comments are closed.