<div class="p-video-box" style="border: 1px #ccc solid; border-radius: 10px; padding: 10px;">
  <div class="up-video" style="display: flex;">
    <nz-upload class="p-image-uploader" [nzDisabled]="uploading" [nzShowUploadList]="false" nzAccept=".mp4"
      (nzChange)="handleChange($event)" [nzCustomRequest]="customReq"
      style="margin-right: 1rem">
      <button type="button" nz-button nzType="default" *ngIf="showUploadBtn" [disabled]="uploading"
        [nzLoading]="uploading">
        <i nz-icon nzType="plus" nzTheme="outline"></i>
        <span>{{ uploading ? 'Uploading' : 'Select Video' }}</span>
      </button>
    </nz-upload>
    <button type="button" nz-button nzType="default" *ngIf="showCapture && !uploading" [disabled]="uploading"
      (click)="captureVideo()"
      [nzLoading]="uploading">
      <i nz-icon nzType="camera" nzTheme="outline"></i>
      <span>截图</span>
    </button>
  </div>
  <div class="p-box d-flex align-items-center p-video-uploader">
    <div class="p-upload-icon" *ngIf="!showUploadBtn && !videoUrl && !uploading">
      <i nz-icon nzType="upload" nzTheme="outline"></i>
      <div class="m-3"></div>
      <span>Click here to upload video</span>
      <div class="mt-5 p-progress-bar" *ngIf="uploading">
        <div class="p-progress-bg" [style.width]="progress*0.2+'rem'"></div>
        <div class="p-progress-value">{{progress}}%</div>
      </div>
    </div>
    <div class="p-upload-progress-bg" *ngIf="uploading" [ngClass]="{'smart-bar': showUploadBtn}">
      <div class="i-bg" [style.width]="progress+'%'"></div>
      <div class="i-text">
        <fa-icon icon="cloud-upload-alt"></fa-icon>
        上传中，请耐心等待...
      </div>
    </div>
    <div class="p-upload-check-bg" *ngIf="checking">
      <div class="i-bg" [style.width]="progress+'%'"></div>
      <div class="i-text">
        <fa-icon icon="cloud-upload-alt"></fa-icon>
        <i nz-icon nzType="loading" nzTheme="outline"></i>Checking...
      </div>
    </div>
    <div class="p-preview" *ngIf="!uploading&&playVedioUrl">
      <video crossorigin="anonymous" [src]="playVedioUrl" controls #videoNode></video>
      <!-- <video crossorigin="anonymous" [src]="safeVideoUrl()" controls #videoNode></video> -->
    </div>
    <div class="p-preview" *ngIf="uploaded&&!playVedioUrl"> 
      <i nz-icon nzType="loading" nzTheme="outline"></i> 等待视频加载完成... 
    </div>
  </div>
  <div [style.display]="!checkVideoExists?'none':''">
    <span><i nz-icon nzType="loading" nzTheme="outline"></i> checking file to upload</span>
  </div>
</div>
