CODEWITHSUNDEEP
video.jshttp-live-streaming
Baa
Baa

Reputation: 517

VideoJS event for missing HLS PLaylist

If I have a VideoJS player quite happily playing a HLS playlist, that suddenly disapears, it will repeatedly reload that playlist file for eternity, and in the console it will print:

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

Normally I have an event handler for there being no source available when you first load the page but I'm unsure how to listen for a source vanishes while the video is playing. Is there an event for this?

Upvotes: 1

Views: 12004

Answers (2)

Baa
Baa

Reputation: 517

The trigger I needed was retryplaylist, used like this in Coffeescript:

player.tech_.on("retryplaylist", ->
    blah
)

In case it interests someone, this is what i'm working with:

# Configure player
videojs("stream", {
    controlBar: {
        playToggle: false
    }
    hls: {
      smoothQualityChange: true
    }
}).ready(->
    player = this

    # Display a modal on error
    player.on("error", ->
        $('.vjs-modal-dialog-content').remove()
        displayError()
    )

    requestStream = ->
        FailCount = 0
        # Check if the remote is live
        # @formatter:off
        $.ajax({
            url: __HLS_URI__

            # If so add the source to videojs
            success: ->
                $('.vjs-poster').removeClass('vjs-hidden')
                $(".vjs-poster").css({'background-image': 'url("/branding/poster-online.png")'})
                $(".vjs-big-play-button").show()
                player.src([{src: __HLS_URI__, type: "application/x-mpegURL"}])
                player.hlsQualitySelector()
                #player.play()
                player.volume(0.5)
                player.tech_.on("retryplaylist", ->
                    if FailCount>=5
                        window.location.reload()
                    else
                        FailCount++
                        console.log(FailCount)
                )


            # If not display the error
            error: ->
                displayError()
                setTimeout((-> requestStream()), 5000)
        })
        #@formatter:on

    requestStream()
)

# Helper to display errors on the player
displayError = ->
    $(".vjs-big-play-button").hide()
    $('.vjs-controls-disabled').removeClass('vjs-controls-disabled')

    $(".vjs-poster").css({'background-image': 'url("/branding/poster-offline.png")'})
    $('.vjs-poster').removeClass('vjs-hidden')

I was trying to find a way to reset VideoJS once the HLS livestream had finished, but eventually I gave up and just forced a page reload instead.

Upvotes: 3

MarketerInCoderClothes
MarketerInCoderClothes

Reputation: 1236

Why not just use HLS.JS ? For every browser, it works, except for Safari on MacOS and any iOS device. Those don't even need HLS.JS, the hls works natively in them.

https://github.com/video-dev/hls.js/

I have a script that detects browser and then decides which version to load: with HLS.JS or just the insert the m3u8 as the source of the video.

Note: Hls.Js is amazing, and has a large community behind it. It allows you to put HLS playlists in a native player for most browsers.

Unless you can't live without VideoJs, go for Hls.Js.

Upvotes: 1

Related Questions