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;，并在muted html标记内添加了video控件，但我有一个相同的想法：视频以100％的音量开始。

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

这是一个小矮人演示 Demo

Answer 1

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

<video #videoPlayer controls

#videoplayer-> #videoPlayer

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

1 个答案: