Video Progress Bar Missing on HLS / m3u8 videos

[ChrisPowellIinc]

Is there a way to include the progress bar?

[chanibal]

Hi, progress bars are disabled on hls on purpose - HLS is usually used with live streams, and there is no way to know the duration of a live stream. There is no config option currently available to reenable the progress bar.

That said, here's a patch. Place it after the <script> tag including the player and before the players tag (or JS invocation):

Bivrost.HLSMedia.prototype._setTime=function(val) { this.video.currentTime=val; };
Bivrost.HLSMedia.prototype._getDuration=function() { return this.video.duration || 1; };

Be warned: using this with a stream, or otherwise undefined length HLS will cause a jumping progress bar.

Please write a comment if it worked, but don't close the ticket. I'll try to add an option in the next release.

[ChrisPowellIinc]

This worked perfectly. Also I am attempting to create buttons page that when click jump to a timestamp in a video. I've attempted to simulate this here:

setTimeout(function(){ Bivrost.HLSMedia.prototype=function() { this.video.currentTime='3200'; };

},8000)

Any suggestions would help. Happy to close out this ticket.

[chanibal]

Simply use player.media.time = 3200. Works with HLS and normal video.

To get the player object, use

var player;
addEventListener("load", function() {
 player=document.getElementsByTagName("bivrost-player")[0].bivrost;
});

[ChrisPowellIinc]

This is coming back as undefined, perhaps because it is being converted to canvas?

[chanibal]

What is undefined, player or player.media.time?
When are you running the command?

The player is constructed on DOMContentLoaded if you're running it with a tag.

But player.media needs to load media before it is available. You could hook to Bivrost.Player.prototype.setMedia for the exact moment.

[ChrisPowellIinc]

Thanks for the prompt response, the player is coming back undefined. Here is a link: https://www.luxvrs.com/e/vr/lux50263.php Check the console log for the error in autojumptime.js

[chanibal]

Just checked your page and you have a list of issues:

1. You use data-bivrost-player alternate syntax, but query for the bivrost-player tag.
2. You use delays instead of loading when needed
3. Overloading prototypes doesn't work this way

Anyway, replace autojumptime.js with:

var jumpTime = 10;

addEventListener("load", function() {
    var player = document.querySelector("bivrost-player, [data-bivrost-player]").bivrost;
    if(player.media) {
        player.media.time = jumpTime;
    }
    else {
        var oldSetMedia = player.setMedia;
        player.setMedia = function(m) {
            oldSetMedia(m);
            m.time = jumpTime;
        }
    }
});

[chanibal]

Are you sure? It works for me. Note that you used a 8 second timeout for the action.

https://user-images.githubusercontent.com/697605/151401813-087e1804-f9bd-47be-a80b-7d359faf778a.mp4

.

[ChrisPowellIinc]

I got it to work thank you!