Search code examples
video.jshttp-live-streaming

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?


Solution

  • 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.