Angular 7 : 设置视频 currentTime 始终为 0

Question

我想用 范围输入 控制我的视频，问题是当我将 video.currentTime 设置为 2（例如）时，它仍然始终停留在 0 ，并且该值永远不会改变。
这是我的 angular 7 代码：
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;
  }

此外， 我尝试用可用的远程 mp4 视频替换 url，它起作用了，但在本地机器上它不起作用。 另一个尝试， 是我在 firefox 上试过这段代码，它工作得很好，但在 chrome 中却没有。

我搜索了很多有关这个主题的内容，但仍然没有找到任何解决方案，希望您能帮助我。提前谢谢你。

Answer 1

虽然违反直觉，但从 <input type="range"> 中获取值会返回一个字符串，如“42”，而不是数字。

您可以通过在其前面添加一个加号轻松将其转换为数字，在这一行中：

而不是

video.currentTime = value

尝试

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

Answer 2

抱歉，我看到了这个解决方案：

但我仍然无法使用 laravel 和 angular 进行配置 ..

Answer 3

对于所有因 chrome 寻求 html5 视频错误而受苦的人，这是我的解决方案：在 laravel（服务器端）：

/**
     * 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');
    }

在客户端只需按照此 link 了解如何请求 BLOB files from Angular。

Angular 7 : 设置视频 currentTime 始终为 0

Angular 7 : set video currentTime is always 0

html

angular

angular7

webapi