



<!--<div>-->
  <!--<h1>{{aaa.a}}</h1>-->

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


  <!--<h1 style="color: #ffffff">{{aaa.a}}</h1>-->
  <video *ngIf="hasVideo"
         [src]="data.contentObj.video_url"
         width="100%" height="100%"
         #videoNode (click)="playVideo()">
  </video>
  <div class="video-cover" *ngIf="initCover && !isPlaying">
    <!--<img crossOrigin="anonymous" *ngIf="initCover" [src]="initCover | resource: sid"-->
         <!--style="width:100%;height:100%;"/>-->
    <img  *ngIf="initCover" [src]="initCover"
         style="width:100%;height:100%;"/>
  </div>

  <div class="bg-mask" *ngIf="!isPlaying && hasVideo" >

  </div>

  <div class="k-play-btn" *ngIf="!isPlaying && hasVideo" (click)="playVideo()"
       style="background: none;width:100%;height:100%;">
    <img [src]="playBtnImg" style="width: 12%; height: auto">
    <!--<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>

</div>
