Angular 7 : set video currentTime is always 0

Question

I want to control my video with a range input, the problem is when I set video.currentTime to 2 (for example) , it still stucking always on 0, and the value is never changed.
here is my angular 7 code:
index.component.html

<video *ngIf="product?.video"
             id="myVideo"
             width="100%"
             height="100%"
             #myVideo
             (loadedmetadata)="onMetadata($event, myVideo)"
             (loadeddata)="pauseVideo(myVideo)"
      >
        <source [src]="serverUrl+product.video.file" type="video/mp4">
        Votre navigateur ne supporte pas le plugin des vidéos.
      </video>
...
...
<input class="range-slider__range" #slider type="range" value="0" min="0" step="1" [max]="maxDuration"
                     (input)="updateVideo(slider.value)"
              >

index.component.ts

  @ViewChild('myVideo') my3DVideo: ElementRef;
  maxDuration = 0;
..
..
pauseVideo(myVideo) {
      console.log("data loaded.");
      myVideo.currentTime = 3; // i used this line to force juming to second 3 but it still always 0
      myVideo.pause();
      console.log(myVideo.currentTime);
  }

  updateVideo(value: any) {
      console.log("sliding..");
      const video = this.my3DVideo.nativeElement;// as HTMLVideoElement;
      video.currentTime = value; // this value is never changes too and it still always 0 
  }
  onMetadata($event, my3DVideo) {
    this.maxDuration = my3DVideo.duration;
  }

In addition, i tried to replace the url with an available distant mp4 video, it worked, but in localmachine it did not working. another try, is that I tried this code on firefox, it worked like a charm, but in chrome it does not .

I searched a lot about this topic but i still did not find any solution, i hope you can help me. thank you in advance.

score 0 · Answer 1 · answered Dec 22 '19 at 19:42

0

Although counterintuitive, getting a value from an <input type="range"> will give you back a string, like "42", instead of a number.

You can easily convert it to a number by adding a plus sign in front of it, in this line:

instead of

video.currentTime = value

try

video.currentTime = +value // this will convert the string to a number

answered Dec 22 '19 at 19:42

Hoff

38,776
17
74
99

I tried it from the begining but, it still not working, the problem is clear that chrome has a specific processing comparing to firefox . – sohaieb azaiez Dec 22 '19 at 19:45

score 0 · Answer 2 · answered Dec 22 '19 at 20:01

0

Sorry, I saw this solution : Seeking in HTML5 video with Chrome

but i still could not be able to configure that with laravel and angular ..

answered Dec 22 '19 at 20:01

sohaieb azaiez

768
9
20

score 0 · Accepted Answer · answered Dec 23 '19 at 14:09

For all who suffers about chrome seeking html5 video bug, here is my solution : in laravel (server side):

/**
     * Get video BLOB format
     *
     */
    public function getVideoBlob(){
        $file_name = 'video.mp4';
        $file_contents = \Storage::disk('public')->get($videoPath);
        return response($file_contents)
            ->header('Cache-Control', 'no-cache private')
            ->header('Content-Description', 'File Transfer')
            ->header('Content-Type', 'video/mp4')
            ->header('Content-length', strlen($file_contents))
            ->header('Content-Disposition', 'attachment; filename=' . $file_name)
            ->header('Content-Transfer-Encoding', 'binary');
    }

in the client side just follow this link for how to request a BLOB files from Angular.

Angular 7 : set video currentTime is always 0

3 Answers3