0

我想用范围输入来控制我的视频，问题是当我将 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 中它没有。

我搜索了很多有关此主题的信息，但仍然没有找到任何解决方案，希望您能帮助我。先感谢您。

4

3 回答 3

0

抱歉，我看到了这个解决方案： 使用 Chrome 搜索 HTML5 视频

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

于 2019-12-22T20:01:13.247 回答
0

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

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

代替

video.currentTime = value

尝试

video.currentTime = +value // this will convert the string to a number
于 2019-12-22T19:42:37.120 回答
0

对于所有遭受 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');
    }

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

于 2019-12-23T14:09:03.013 回答