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视频替换该网址，它可以工作，但是在本地计算机上却不起作用。 另一种尝试，是我在firefox上尝试了此代码，它像一种魅力，但在chrome中却没有。

我搜索了很多有关此主题的内容，但仍未找到任何解决方案，希望您能为我提供帮助。预先谢谢你。

Answer 1

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

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

代替

video.currentTime = value

尝试

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

Answer 2

对不起，我看到了这个解决方案： Seeking in HTML5 video with Chrome

但是我仍然无法使用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');
    }

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

角度7：设置视频currentTime始终为0

3 个答案: