Progressbar stucks about mat-video

[gabrielvendrame]

Same problem, also source tag inside mat-source seems not to work.

Not even fetching the video

<mat-video title="Video" [autoplay]="true" [preload]="true" [fullscreen]="true"[download]="false" color="accent" spinner="spin">
    <source matVideoSource src="http://localhost:3000/api/video" type="video/mp4">
</mat-video>

Video properly loading ( progressbar still not working)

<mat-video src="http://localhost:3000/api/video" title="Video" [autoplay]="true" [preload]="true" [fullscreen]="true" [download]="false" color="accent" spinner="spin">
</mat-video>

[ricardotorre]

https://stackblitz.com/edit/angular-o9vxrp

i have created this where the problem reproduces, first click/drag works but then doesn't appear to release (running on Chrome Version 83.0.4103.106 (Official Build) (64-bit))

[atgnatus]

I fixed this by removing the constructor in internal/mat-slider-progress-bar/mat-slider-progress-bar.component.ts.

Now the progress / seek bar works fine in Angular 10.

I also removed the host in the component decorator since it was pointing to slider.ts methods that do not exist anymore but this step was not necessary.

[peavers]

Also experiencing this.

[nkoehler]

Stuck as in won't move or how? More details if possible, browsers, and a stackblitz will help.

[MartinMikac]

Stuck as in won't move or how? More details if possible, browsers, and a stackblitz will help.

I cant move to other part of movie. for example, in the middle of a movie. On hover of red dot of actual position on movie, icon has been changed to hand. But is not possible to move this "red dot" to any other side ( forward or backward)

My movie has size about 1GB and 8 minutes. Format .mp4. Same results is with format .mov. Codec H264.

<mat-video
    title="matVideoSource"
    [overlay]="true"
    [autoplay]="false"
    [preload]="false"
    [quality]="true"
    [fullscreen]="true"
    [download]="false"
    color="accent"
    spinner="spin"
    poster=""
    src="assets/life_ep_1.mp4"
  >

[GKaszewski]

Also experiencing this problem

[miguelleitevieira]

ERROR in (1,1): Directive ɵd, Property '_onSlide' does not exist on type 'MatSli
derProgressBarComponent'.
(1,1): Directive ɵd, Property '_onSlideEnd' does not exist on type 'MatSliderPro
gressBarComponent'.
(1,1): Directive ɵd, Property '_onSlideStart' does not exist on type 'MatSliderP
rogressBarComponent'.
node_modules/mat-video/mat-video.d.ts.ɵm.html(1,1): Directive ɵd, Property '_onS
lide' does not exist on type 'MatSliderProgressBarComponent'.
node_modules/mat-video/mat-video.d.ts.ɵm.html(1,1): Directive ɵd, Property '_onS
lideEnd' does not exist on type 'MatSliderProgressBarComponent'.
node_modules/mat-video/mat-video.d.ts.ɵm.html(1,1): Directive ɵd, Property '_onS
lideStart' does not exist on type 'MatSliderProgressBarComponent'.

I'm getting this strange error. Someone know how to fix?

[mazard]

Same problem here:
ERROR in (1,1): Directive ɵd, Property '_onSlide' does not exist on type 'MatSliderProgressBarComponent'.
(1,1): Directive ɵd, Property '_onSlideEnd' does not exist on type 'MatSliderProgressBarComponent'.
(1,1): Directive ɵd, Property '_onSlideStart' does not exist on type 'MatSliderProgressBarComponent'.

Due to this error I'm not able to build SSR.

[chsculpt]

I'm also seeing problems with the Progress Bar:
1 it doesn't, there is a gripper hand but clicking on the bar does nothing, and you can't slide the position either.
2) it doesn't fill 100% of the video frame

[chsculpt]

Also seeing Same problem as reported by gabrielvendrame, also source tag inside mat-source seems not to work.

[cryystyy]

I have the same issue.

[ricardotorre]

same here too, angular 9

[aponski]

I have the same problem unfortunately (Angular 9). I guess I have to look for other player :(

[yukwar]

What did you removed from the constructor?

constructor(
    elementRef: ElementRef,
    focusMonitor: FocusMonitor,
    changeDetectorRef: ChangeDetectorRef,
    @Optional() dir: Directionality,
    @Attribute("tabindex") tabIndex: string
  ) {
    super(elementRef, focusMonitor, changeDetectorRef, dir, tabIndex);
    this.tabIndex = parseInt(tabIndex, 10) || 0;
  }

[ricardotorre]

The whole constructor is redundant and can be removed, the problem happens due to a new constructor signature in Angular 9 and 10

[saeed-abdul-rahim]

I've tried removing it from esm2015/internal/mat-slider-progress-bar/mat-slider-progress-bar.component.ts.
This isn't working for me. Result is the same
Angular 9