Video tag not working on iphone/ipad chrome in Angular

I wrote a few lines code to stream a video. In my code, I'm calling an API to get a link, and that link setting in the src of the video tag and trying to play. And my HTML5 video player works very fine in windows, android, and MAC chrome. Now I just need to play in iPhone/ iPad

HTML code

<video #video playsinline controls="controls" poster="{{imageName}}" preload="metadata" width="100%"
    height="250" type="video/mp4">
    <source #src [src]="videolink" type=video/mp4>
    Your browser does not support HTML5 video.
</video>


<!-- Custom controller -->
<div id="video-controller-id" class="video-controller" fx fxLayoutAlign="space-between center">
    <div controls="controls">
        <mat-slide-toggle checked={{isToggle}} (change)="toggle($event)">{{cameraStatus}}</mat-slide-toggle>
    </div>
    <div fxLayout="row">
        <div fxLayout="row" class="volume">
            <mat-icon matTooltip="{{muteStatus}}" matTooltipHideDelay="500" matTooltipPosition="above"
            style="cursor: pointer; color: white;" (click)="videoVolume()">
            {{volume}}</mat-icon>
            <input #volumeSlider class="volume-slider" id="volumeSlider" type="range" min="0" max="100"
            value="50" step="1" (input)="videoVolumeSlider(volumeSlider.value)">
        </div>
    </div>
    <div>
    <mat-icon style="cursor: pointer; color: white;" (click)="fullScreen()">fullscreen
    </mat-icon>
    </div>
</div>

Typescript code

@ViewChild('video') videoTag: ElementRef;
@ViewChild('video') srcTag: ElementRef;
isToggle: boolean = false;
videolink: any;

toggle(event: MatSlideToggleChange) {
    this.video = document.getElementById("video");
    if (event.checked) {
      this.isToggle = true;
      this.isProgressBar = true;
      this.titleVisibility = "visible";
      this.cameraStatus = "CAMERA ON";
      this.stationService.getCameraUrl(this.stationId, "mp4").subscribe(
        data => {
          var urlData = data as any;
          this.videolink = urlData.url;
          this.srcTag.nativeElement.setAttribute('src', this.videolink);
          this.videoTag.nativeElement.load();
          var playPromise = this.videoTag.nativeElement.play();
          if (playPromise != null) {
            this.isProgressBar = false;
          }
        },
        error => {
          console.log(error);
        });
    } else {
      this.isProgressBar = false;
      this.videoTag.nativeElement.pause();
      this.titleVisibility = "hidden";
      this.cameraStatus = "CAMERA OFF"
    }
}

My stream audio is aac and video is H.264 .Could you please help me how to solve this issue.