通过 angular 中的 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% 音量开始。

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

这是一个 plunker 演示 Demo

Answer 1

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

<video #videoPlayer controls

#videoplayer -> #videoPlayer

通过 angular 中的 component.ts 调整视频音量 2+

Adjusting video volume via component.ts in angular 2+

html

video-streaming

angular