Commit 616826b2 authored by liujiangnan's avatar liujiangnan

feat: 背景图片

parent f6905160
<div
class="p-courseware-video"
[style.background-image]="hasVideo ? '' : 'url(assets/player/video-not-upload.jpg)'"
>
<video *ngIf="hasVideo" <div class="body-bg"></div>
[src]="data.contentObj.video_url" <div class="player-border">
width="100%" height="100%" <div
#videoNode (click)="playVideo()"> class="p-courseware-video"
</video> [style.background-image]="hasVideo ? '' : 'url(assets/player/video-not-upload.jpg)'"
<div class="video-cover" *ngIf="initCover && !isPlaying"> >
<img *ngIf="initCover" [src]="initCover"
style="width:100%;height:100%;"/> <video *ngIf="hasVideo"
</div> [src]="data.contentObj.video_url"
<div class="k-play-btn" *ngIf="!isPlayStarted && hasVideo" (click)="playVideo()"> width="100%" height="100%"
<i class="anticon anticon-play-circle-o"></i> #videoNode (click)="playVideo()">
</div> </video>
<div class="k-video-control" *ngIf="hasVideo"> <div class="video-cover" *ngIf="initCover && !isPlaying">
<div class="k-video-control-bg"></div> <img *ngIf="initCover" [src]="initCover"
<div class="k-video-control-time-past">{{currentTime | time}}</div> style="width:100%;height:100%;"/>
<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>
<div class="k-video-control-time-total">{{duration | time}}</div> <div class="k-play-btn" *ngIf="!isPlayStarted && hasVideo" (click)="playVideo()">
<div class="k-video-control-tool"> <i class="anticon anticon-play-circle-o"></i>
<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 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>
</div> </div>
@import '../style/common_mixin.scss'; @import '../style/common_mixin.scss';
.body-bg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image: url('../../assets/player-bg.png') !important;
background-size: 100%;
}
.player-border{
position: absolute;
left: calc((100% - 100vh * 1.36)/ 2);
top: 5vh;
right: calc((100% - 100vh * 1.36)/ 2);
bottom: 5vh;
text-align: center;
// box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
border-radius: 11px;
border: 20px solid #23b1c2;
background-color: #fff;
overflow: hidden;
color: #303133;
transition: .3s;
}
.p-courseware-video { .p-courseware-video {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment