Work with HTML5 Video Player with Angular 2+

Hi coders,

This is just a straight forward post.
I'll explain you all, how to use the html5 video player (https://www.w3schools.com/html/html5_video.asp) with angular.
Actually there are some tricky parts as well, such as; not refreshing the video when clicking on multiple video urls.
So, lets get started.

video-player.component.html

<div id="jobCallDetailModal" class="modal fade dashboardN" role="dialog" data-backdrop="static">
    <div class="modal-dialog modal-lg modal-xl">
        <div class="modal-content">
            <div class="modal-header" *ngIf="callDetails != null">
                <button type="button" class="close" (click)="closeVideoViewer()">
                    <i class="ti ti-close"></i>
                </button>
                <h5 class="modal-title float-left">Job Call: {{callDetails.createdTime}}</h5>
            </div>
            <div class="modal-body" *ngIf="openTokSettings != null && archiveUrl != null && showVideo">
                <video width="600" controls>
                    <source src="{{archiveUrl}}" type="video/mp4">
                    Your browser does not support HTML5 video.
                </video>
                <div>
                    <app-user-chat [mode]="4" [selectedId]="jobId" actionTitle="Share Archive" [originId]="2" [archiveDetails]="callDetails" 
                    (archiveShareMessage)="getShareArchiveState($event)"></app-user-chat>
                    <span>{{message}}</span>
                </div>
            </div>
        </div>
    </div>
    
</div>

video-player.component.ts

async showHideCallDetails(archiveId: string){
    this.message = "";
    this.archiveUrl = "";
    if (this._userChatComponent != null){
      this._userChatComponent.closeChatList();
    }
    if (this.jobCallDetails != null && this.jobCallDetails.length > 0){
      if (this.jobCallDetails != null && this,this.jobCallDetails.length > 0){
        this.callDetails =  this.jobCallDetails.find(a => a.archiveId == archiveId);
      }
      this.openTokSettings = await this.opentokService.getOpenTokSettings();
      this.showVideo = true;
      this.archiveUrl = this.openTokSettings.callArchiveBaseUrl + this.openTokSettings.callArchiveBaseFolder + "/" + archiveId + "/archive.mp4";      
      $('#jobCallDetailModal').modal('show');
    }
  }

Happy video plays...