Ionic 5 - Video SeekTo with currentTime crashs video play

Hey there,
I am building an simple video player and use the ion-range as scrubbar. I know it is not meant for that, but so far so good and it works for sure on iOS.

I try to make it as short as possible. The problem for now is, when I click on an android on the scrubbar the video seeks to the correct time (checked the value and type, which is number and correct value) but then the video plays struggling… it has no more sound and runs faster as it should, or it makes jumps? Not totally sure, it is really weird.

Does anybody ever had this kind of thing? When I use the console in the browser to jump to a point via DOM-Manipulation there is no problem.

I took the video via the Angular-ViewChild way, which should be fine.

here you can see how my seekTo funktion looks. It is triggered by the (click) event on the ion-range-bar.

ts-file:

....
// this is how I get the video Element
@ViewChild('playerVideo') playerVideo : ElementRef;
.....
  public seekTo(event) {
    console.log('SeekTo Called');
    console.log(event);
      const clickedvalue = event.target.value;
      this.playerVideo.nativeElement.pause();
      this.playerVideo.nativeElement.currentTime = clickedvalue;
      this.playerVideo.nativeElement.play(); // I do not need to use this, but tested it both ways. No difference
      this.setCurrentPosition(this.playerVideo.nativeElement.currentTime); // currentPosition is in the ngModel of the ion-range-bar. But also makes no difference on the playing prob
  }

template:

            <video #playerVideo id="playerVideo" width="100%" preload="metadata" class="videoPlayer" poster="{{this.videoImage}}" webkit-playsinline="true" playsinline="true" (loadedmetadata)="loadedMetadata($event)">
                <source [src]="this.videoSource" type="video/mp4" />
            </video>

            <ion-row class="control-bar">

            <ion-col size="2">
                <ion-button class="ion-no-padding" (click)="playPause()"><i class="fa fa-play" aria-hidden="true"></i></ion-button>
            </ion-col>
            <ion-col size="6">
                <ion-range [(ngModel)]="currentPosition" (click)="seekTo($event)" min="0" max="{{this.durationRange}}" class="">
                </ion-range>
            </ion-col>

I nearly tried everything I guess… also round the values… Maybe somebody has an idea. :slight_smile:

Oh and additional info. The duration value I get via the (durationChange), not seen in the code here.

Best and thanks in advance
Pascal

Problem is solved. It is or was something with an HLS Stream that is used in the video.