通过component.ts以角度2+调整视频音量

Question

我在html模板中显示了一个视频，如下所示：

<video #videoplayer controls (click)="playVideo($event)" style="width: 100%" (ended)="openModal(template)">
     <source src="{{ videoSource }}" type="video/mp4"> 
      Your browser does not support HTML5 video.
</video>

我的component.ts文件如下：

export class Episodes1Component implements OnInit {
  @ViewChild('videoPlayer') videoplayer: any;
  videoSource = 'my video source.mp4';

  constructor() { 
  }

  ngOnInit() {
  }

  pauseVideo(event: any) {
    this.videoplayer.nativeElement.pause();
  }

  playVideo(event: any) {
    this.videoplayer.nativeElement.play();
    this.videoplayer.nativeElement.muted = true;
    this.isEnded = false;
  }
}

我要做的是将音量调整为0.2。 我在component.ts中使用的代码是this.videoplayer.nativeElement.volume= 0.2; 但不会调节音量。

我尝试过this.videoplayer.nativeElement.muted= true; 并在video html标签内添加muted控件，但我有一个相同的想法：视频以100％的音量开始。

我想知道什么是控制音量的最佳方法。 任何帮助，将不胜感激。

这是一个小样演示

Answer 1

您的代码是正确的。 您只有一个错字：

<video #videoPlayer controls

#videoplayer > #videoPlayer