<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%;"/>
  </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>
