CODEWITHSUNDEEP
javascriptffmpegstreammedia-playermediaelement.js
user10368033
user10368033

Reputation:

MediaElementJS Player + Reload HLS stream - Any Solution?

How do I stop showing the Network Error message and just autoreload the player when the player lose the connections with the stream?

I am using an HLS stream for this player: MediaElementJS

I found this solution in a blog but for me it is not the best option and can be difficult to set up a private proxy 24hs. This can be solved externally by running an in-app proxy. I have the player in a wrapper that also starts up an HTTPListener. Then instead of giving the MediaElement http://server.com/file.m3u8, I rewrite this URL to http://localhost:58392/http/80/server.com/file.m3u8. FFmpeg hits the proxy with requests and the proxy parses the URL from the request, gets the content and returns it to ffmpeg.

This is my player configuration in js:

    <script>
        $("video").mediaelementplayer({
            features: ["playpause", "volume", "progress", "airplay", "chromecast", "fullscreen"],
            forceLive: true
        });
        playerObject = document.getElementById("player");
    </script>

Upvotes: 1

Views: 1456

Answers (1)

Eugen Rieck
Eugen Rieck

Reputation: 65294

The solution is a two-step process:

First you need to attach an event to notify you of the player being created:

   $("video").mediaelementplayer({
        features: ["playpause", "volume", "progress", "airplay", "chromecast", "fullscreen"],
        forceLive: true,
        success: playerReady
    });

Now, after the player is created, you can attach to the "ended" event of the player:

function playerReady(media, node, player) {
  media.addEventListener('ended', function(e) {
    //Do what you want, e.g. reload the page
  });
}

Upvotes: 1

Related Questions