Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video Progress Bar Missing on HLS / m3u8 videos #12

Open
ChrisPowellIinc opened this issue Jan 20, 2022 · 9 comments
Open

Video Progress Bar Missing on HLS / m3u8 videos #12

ChrisPowellIinc opened this issue Jan 20, 2022 · 9 comments
Assignees
Labels
enhancement New feature or request

Comments

@ChrisPowellIinc
Copy link

Is there a way to include the progress bar?

@chanibal
Copy link
Member

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.

@chanibal chanibal added the enhancement New feature or request label Jan 21, 2022
@chanibal chanibal self-assigned this Jan 21, 2022
@ChrisPowellIinc
Copy link
Author

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
Copy link
Member

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
Copy link
Author

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

@chanibal
Copy link
Member

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
Copy link
Author

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
Copy link
Member

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
Copy link
Member

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

https___www.luxvrs.com_e_vr_lux50263.php.-.Google.Chrome.2022-01-27.17-30-44.mp4

.

@ChrisPowellIinc
Copy link
Author

I got it to work thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants