Player keep on trying to download HLS live stream playlist when server goes down

[RadhiFadlillah]

Description

While serving HLS live stream with video.js, if the media server goes down or disconnected, the player will keep trying to load the playlist indefinitely.

Steps to reproduce

1. Start playing an HLS stream.
2. Bring down the media server, or disconnect client from the network.

Results

Expected

If after several seconds the playlist can't be downloaded, stop trying and trigger error event (e.g hls-playlist-404) which can be handled by error listener.

Actual

The video player keep on trying to download the HLS playlist without end.

Error output

The console keep spewing this warning :

VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the final playlist.

Additional Information

Please include any additional information necessary here. Including the following:

Video.js versions

Video.js 7.4.1

Browsers / OS

• Firefox 65.0.2 / Manjaro Linux 64-bit
• Chromium 72.0.3626.121 / Manjaro Linux 64-bit

Plugins

No additional plugins used, since videojs-http-streaming now included in Video.js.

Related issues

• videojs/http-streaming #362.
• videojs/video.js #5435

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

Looks like this is similar to #5435, if the live stream goes down without an end list tag, we need to continue retrying because it's possible that the stream will return. There's a retryplaylist event that gets triggered on the tech that you can listen to handle this case, or you can use something like videojs-errors which times out the player after 45 (or configurable) amount of seconds.

Hope this helps.

[kslr]

hi @gkatsev
For the stream that needs to be prepared, play 404 for the first time.
I reset the state by listening to error code 4.

Is this a best practice?

                player.on('error', () => {
                    player.createModal('Retrying connection');
                    if (player.error().code === 4) {
                        this.player.retryLock = setTimeout(() => {
                            player.src({
                                src: data.url
                            });
                            player.load();
                        }, 5000);
                    }
                });

[musarano]

Seems good to me :)

[musarano]

The thing is that, this, keeps on going:

24video.min.js:12 VIDEOJS: ERROR: DOMException: Failed to set the 'duration' property on 'MediaSource': The 'updating' attribute is true on one or more of this MediaSource's SourceBuffers.

[musarano]

Well i just duplicated the source...

		<source src="<?php echo $hls; ?>" type="application/x-mpegurl">
		<source src="<?php echo $hls; ?>" type="application/x-mpegurl">

And disable/enable the wifi connection, twice in a roll, and its now connecting fine (livestreaming)
PS: For now...

I will test it without the on.error(), and post back.

[musarano]

humm, It seems that this small move did it. (doubling the sources) at least for me, for now, and using live streaming from wowza media server. Hope its something that could help.

[musarano]

I was wrong.. that didnt work at the end.

[Snowbell92]

Any update on this? I would like to detect the HTTP code being given and decide if I want the player to retry or stop.

[kslr]

@Snowbell92
Send a request, judge according to the response status code

[Snowbell92]

@kslr can you please give me an example? I thought player.tech().Hls.xhr.beforeRequest might work but I can't find any proper example for player.tech().Hls.xhr.beforeRequest - I don't even know if this will work, but I am willing to try.

[kslr]

@kslr can you please give me an example? I thought player.tech().Hls.xhr.beforeRequest might work but I can't find any proper example for player.tech().Hls.xhr.beforeRequest - I don't even know if this will work, but I am willing to try.

You can use a separate request

[shahabrashidi]

Hi , Here is my code ..

import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

// eslint-disable-next-line import/prefer-default-export
const usePlayer = ({ src, controls, autoplay}) => {
const options = {
fill: true,
fluid: true,
preload: 'auto',
controls:true,
html5: {
hls: {
enableLowInitialPlaylist: true,
smoothQualityChange: true,
overrideNative: true,
},
},
type: 'application/x-mpegURL',
};
const videoRef = useRef(null);
const [player, setPlayer] = useState(null);

useEffect(() => {
const vjsPlayer = videojs(videoRef.current, {
...options,
controls,
autoplay,
sources: [src],
});
setPlayer(vjsPlayer);

return () => {
  if (player !== null) {
    player.dispose();
  }
};

}, []);
useEffect(() => {
if (player !== null) {
player.src({ src });
}
}, [src]);

return videoRef;
};

const VideoPlayer = ({ src, controls, autoplay }) => {
const playerRef = usePlayer({ src, controls, autoplay });

return (

);
};

VideoPlayer.propTypes = {
src: PropTypes.string.isRequired,
controls: PropTypes.bool,
autoplay: PropTypes.bool,
};

VideoPlayer.defaultProps = {
controls: true,
autoplay: false,
};

export default VideoPlayer;

and this is my dashboard code .

import React , {Component} from "react";
import ResponsivePlayer from "../components/ResponsivePlayer";
import VideoPlayer from "../components/Video";

class Dashboard extends Component{
render() {
//return
return <VideoPlayer
src={'https://gymno.arvanlive.com/hls/aida/aida.m3u8'}
autoplay={true}
controls={true}
/>

}

}

export default Dashboard

when i am adding my m3u8 URL as streming URL for playing i am receiving this error ..

VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the only playlist.

would ou please asist which part i am making mistake exactly .

[svprdga]

Any update on this? It would be helpful to have the error response and its status code to decide what to do.

[musarano]

Hi ! I been waiting for the same solution, and no matter how the increasing versions goes, it doesnt seems been takeing care of.. Dont know what to say or think.

…

On Sat, 23 May 2020 at 06:47, David Serrano Canales < ***@***.***> wrote: Any update on this? It would be helpful to have the error response and its status code to decide what to do. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#5849 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABMFGW2KB33KYRFLZWK64L3RS6LTLANCNFSM4G44XIZA> .

[kosso]

In an Angular 9 app, I use something like this to detect (and count) when the tech retryplaylist event occurs (which kicks in when the HLS playlist contents go away, for whatever reason. (Streaming stopped. Server down, etc)

When a specified retry limit has been hit, I switch the source to an 'offline' looping local video.

public retries:number = 0;
public retries_limit:number = 6;
...
this.video_player.tech(true).on('retryplaylist', (event) => {
      console.log('retryplaylist: ', event);
      this.retries++;
      if(this.retries >= this.retries_limit){
        // Give up and go offline.
        this.video_player.src({
          src: '/assets/video/offline_main.mp4',
          type: 'video/mp4'
        });
        this.video_player.loop(true);
        this.video_player.play();
        this.retries = 0;
        this.vps.startSourcePollInterval();
      }
    });

I also use a separate service (vps) to poll the .m3u8 playlist url using an http.head request, to detect its existence. That way I can automatically bring the stream player source back online when the playlist url is active and exists again.