search

nkoehler / mat-video

:tv: mat-video is an Angular 8/9+ video player using Material!
https://nkoehler.github.io/mat-video/
MIT License
91 stars 47 forks source link

Spinner displayed forever on iphone until I click play #54

Closed thibserot closed 4 years ago

thibserot commented 4 years ago

PLEASE FILL THIS OUT IF YOU WANT HELP WITH AN ISSUE!

Bug, feature request, or proposal:

Seems like https://github.com/nkoehler/mat-video/issues/19 is still not working in the latest mat-video release (2.8.0) on iphone.

I get the spinner forever even for a 3seconds video and when i click on play the spinner disappear. I don't have this issue on android or ubuntu

What is the current behavior?

The spinner stays present even if the video is loaded on iphone

What is the expected behavior?

The spinner should disappear like it's the case on android or various browser

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV

go on the demo page https://nkoehler.github.io/mat-video/ on an iphone you'll see that the spinner is always present

What is the use-case or motivation for changing an existing behavior?

consistency of display across all players.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

I'm using: mat-video: "2.8.0", angular: 8.2.14 material: 8.2.3 Typescript: 3.5.3

Issue is present on iphone on safari and chrome at least

Is there anything else I should know?

thibserot commented 4 years ago

This seems to be related to https://stackoverflow.com/questions/50051639/javascript-html5-video-event-canplay-not-firing-on-safari and https://github.com/video-dev/hls.js/issues/1686

Putting some debug i can confirm that canplay event isn't triggered on the iphone while loadmetada is.

This is the sequence I get from Chrome/Ubuntu: loadstart -> durationchange -> loadmetadata -> canplay

This is what I get from Safari/Iphone: loadstart -> durationchange -> loadmetadata

Do we really need to wait for the canplay to remove the spinner?

Putting this.videoBuffering = false in https://github.com/nkoehler/mat-video/blob/master/projects/mat-video/src/lib/ui/mat-video-spinner/mat-video-spinner.component.ts#L31 would solve the problem. I'm happy to submit a PR if you are happy with the change

What do you think?

nkoehler commented 4 years ago

Thanks for the tip, I've taken that approach and implemented a fix in release 2.8.1 that should solve the issue.