search

sampotts / plyr

A simple HTML5, YouTube and Vimeo player
https://plyr.io
MIT License
26.6k stars 2.94k forks source link

Improve buffering/loading state handling #615

Open SinghSatyam opened 7 years ago

SinghSatyam commented 7 years ago

Expected behaviour

Loader should be present when the video is buffering. On slow speed internet connection, a loader/some other way should be present to display that the video is being loaded.

Actual behaviour

No loader is present. Although I can see it on plyr.io that the progress bar shows that it's loading. But not from the one cloned.

Environment

Players affected:

Steps to reproduce

Relevant links

manish-wedigtech commented 7 years ago

I am also looking for that. did you found any hack?

sampotts commented 7 years ago

Do you mean loading state for YouTube and Vimeo? HTML5 is working as far as I know unless you're missing some CSS.

manish-wedigtech commented 7 years ago

Hey @sampotts I have included https://cdn.plyr.io/2.0.13/plyr.css and https://cdn.plyr.io/2.0.13/plyr.js in page. but no loading is showing for Vimeo streaming URL.

Instead of this I am doing as a hack like

players[0].on('seeking', function(event) {

`$(".loader-video").show();`

});

players[0].on('seeked', function(event) {

$(".loader-video").hide();

}); and this is not I was looking for :(.

SinghSatyam commented 7 years ago

Yeah. If I am trying to play a vimeo video on a slow network, then the loader should come i.e the video is buffering. Right now I am getting something like this with a blank black screen. image

Expected behaviour is something like this: image

doostinharrell commented 5 years ago

@sampotts / @manish-wedigtech,

I just submitted a PR (https://github.com/sampotts/plyr/pull/1577) to add loading classes when Vimeo and Youtube videos are buffering. This improves things slightly for @manish-wedigtech (only for buffering state, not loading).

For my clients use case I'm planning on writing some style overrides for .plyr--loading that will force rendering of the poster via @extend .plyr--stopped; while rendering a loading icon on top.

Something along those lines may work for you @manish-wedigtech, although you won't see a percentage of your buffering state.

beardhatcode commented 3 years ago

@sampotts , this issue can likely be closed :)