
<div class="body-bg"></div>
<div class="player-border">
  <div
    class="p-courseware-video"
    [style.background-image]="hasVideo ? '' : 'url(assets/player/video-not-upload.jpg)'"
  >

    <video *ngIf="hasVideo"
           [src]="data.contentObj.video_url"
           width="100%" height="100%"
           #videoNode (click)="playVideo()">
    </video>
    <div class="video-cover" *ngIf="initCover && !isPlaying">
      <img *ngIf="initCover" [src]="initCover"
           style="width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;"/>
    </div>
    <div class="k-play-btn" *ngIf="!isPlayStarted && hasVideo" (click)="playVideo()">
      <i class="anticon anticon-play-circle-o"></i>
    </div>
    <div class="k-video-control" *ngIf="hasVideo">
      <div class="k-video-control-bg"></div>
      <div class="k-video-control-time-past">{{currentTime | time}}</div>
      <div #videoProgress class="k-video-control-progress"
           (mousedown)="onProgressMouseDown($event)"
           (mousemove)="onProgressMouseMove($event)"
           (mouseup)="onProgressMouseUp($event)">
        <div class="i-bg"></div>
        <div class="i-before-progress" [style.width]="progress + '%'"></div>
        <div class="i-cursor" [style.left]="progress + '%'"></div>
      </div>
      <div class="k-video-control-time-total">{{duration | time}}</div>
      <div class="k-video-control-tool">
        <div class="i-tool-btn" (click)="onBtnQuickSeek(-10)">-10</div>
        <div class="i-tool-btn" (click)="onBtnQuickSeek(-5)">-5</div>
        <div class="i-tool-btn" (click)="onBtnQuickSeek(5)">+5</div>
        <div class="i-tool-btn" (click)="onBtnQuickSeek(10)">+10</div>
      </div>
    </div>

  </div>
</div>
