Angular 7：设置视频 currentTime 始终为 0答案

【问题标题】：Angular 7 : set video currentTime is always 0Angular 7：设置视频 currentTime 始终为 0
【发布时间】：2019-12-22 19:19:03
【问题描述】：

我想用 范围输入 控制我的视频，问题是当我将 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，它可以工作，但在 localmachine 中它不起作用。 另一种尝试，是我在 firefox 上尝试了这段代码，它的工作原理很吸引人，但在 chrome 中却没有。

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

【问题讨论】：

标签： html angular angular7 webapi

【解决方案1】：

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

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

而不是

video.currentTime = value

试试

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

【讨论】：

我从一开始就试过了，但还是不行，问题很明显，chrome与firefox相比有特定的处理。

【解决方案2】：

抱歉，我看到了这个解决方案： Seeking in HTML5 video with Chrome

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

【讨论】：

【解决方案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');
    }

在客户端只需点击此链接了解如何请求BLOB files from Angular。

【讨论】：