<div class="p-video-box"> <div class="up-video" style="display: flex;"> <!--<nz-upload class="" [nzDisabled]="!showUploadBtn"--> <!--[nzShowUploadList]="false"--> <!--[nzBeforeUpload]="beforeUpload"--> <!--nzAccept = ".mp4"--> <!--style="margin-right: 1rem">--> <nz-upload class="p-image-uploader" [nzDisabled]="uploading" [nzShowUploadList]="false" nzAccept = ".mp4" [nzAction]="uploadUrl" [nzData]="uploadData" (nzChange)="handleChange($event)" 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> <!--<span>Select Video</span>--> </button> </nz-upload> <!--<button nz-button nzType="primary" *ngIf="showUploadBtn"--> <!--style="margin-right: 1rem"--> <!--type="button"--> <!--[nzLoading]="uploading"--> <!--(click)="handleUpload()"--> <!--[disabled]="!videoFile || uploading">--> <!--<i nz-icon type="upload" theme="outline"></i>--> <!--<span>{{ uploading ? 'Uploading' : 'Start Upload' }}</span>--> <!--</button>--> <!-- <button type="button" (click)="extraCover()" nz-button nzType="default" [disabled]=" !(videoUrl && videoUrl.constructor.name === 'String')">设置封面</button> --> <!-- <nz-divider></nz-divider> <div [style.display]="!uploading?'none':''" style="position:relative"> <div style="width: calc( 100% - 20px);"> <nz-progress [nzPercent]="progress"> </nz-progress> </div> <i (click)="cancelUpload()" class="anticon anticon-close-circle" style="position: absolute;top: 50%;right: 0;transform: translateY(-50%);cursor: pointer"></i> </div> --> </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 dddd " *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> Uploading... </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 && videoUrl " > <!--<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>--> <video [src]="safeVideoUrl(videoUrl)" controls #videoNode></video> </div> </div> <div [style.display]="!checkVideoExists?'none':''"> <span><i nz-icon nzType="loading" nzTheme="outline"></i> checking file to upload</span> </div> </div>