Commit 647188cb authored by limingzhe's avatar limingzhe

fix duration bug

parent 6ba386bc
<div class="courseware-container d-flex row" #videoContainer> <button style="margin: 4vw; display: flex; align-items: center" nz-button nzType="primary" nzGhost (click)="guideBtnClick(true)">
<i nz-icon type="play-circle"></i>
1分钟简易教程
</button>
<div class="courseware-container d-flex row" #videoContainer style="padding-left: 2vw; width: 90%">
<div class="col-8"> <div class="col-8">
<!--crossorigin="anonymous"--> <!--crossorigin="anonymous"-->
<video class="courseware-video" <video class="courseware-video"
...@@ -52,3 +62,14 @@ ...@@ -52,3 +62,14 @@
</div> </div>
</div> </div>
<div *ngIf="showGuideAudio" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-items: center; background: rgba(0,0,0,.7)" (click)="guideBtnClick(false)">
<div style="margin: auto;">
<video style="width: 60vw; height: auto" src="assets/guide/guide.mp4" controls="controls">
您的浏览器不支持 audio 标签。
</video>
</div>
</div>
...@@ -33,6 +33,8 @@ export class FormComponent implements OnInit, OnChanges { ...@@ -33,6 +33,8 @@ export class FormComponent implements OnInit, OnChanges {
KEY = 'hw_002'; KEY = 'hw_002';
showGuideAudio;
private tooBigError: NzMessageDataFilled = null; private tooBigError: NzMessageDataFilled = null;
...@@ -222,5 +224,10 @@ export class FormComponent implements OnInit, OnChanges { ...@@ -222,5 +224,10 @@ export class FormComponent implements OnInit, OnChanges {
this.appRef.tick(); this.appRef.tick();
}, 1); }, 1);
} }
guideBtnClick(value) {
this.showGuideAudio = value;
}
} }
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
.k-play-btn { .k-play-btn {
position: absolute; position: absolute;
//width: 12%; //width: 12%;
top: 80%; top: 75%;
left: 88%; left: 88%;
font-size: 12vh; font-size: 12vh;
color: #444; color: #444;
......
import {AfterViewInit, ApplicationRef, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core'; import {
AfterViewInit,
ApplicationRef,
ChangeDetectorRef,
Component,
ElementRef,
Input,
OnDestroy,
OnInit,
ViewChild
} from '@angular/core';
@Component({ @Component({
selector: 'app-play', selector: 'app-play',
...@@ -27,7 +37,8 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy { ...@@ -27,7 +37,8 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy {
// aaa; // aaa;
constructor(private appRef: ApplicationRef) { constructor(private appRef: ApplicationRef,
public changeDetectorRef: ChangeDetectorRef) {
} }
ngOnInit() { ngOnInit() {
...@@ -66,6 +77,8 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy { ...@@ -66,6 +77,8 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy {
window['air'].hideAirClassLoading(this.KEY, this.data); window['air'].hideAirClassLoading(this.KEY, this.data);
this.refresh(); this.refresh();
}, this.KEY); }, this.KEY);
...@@ -140,6 +153,7 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy { ...@@ -140,6 +153,7 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy {
this.player.onloadedmetadata = () => { this.player.onloadedmetadata = () => {
this.currentTime = 0; this.currentTime = 0;
this.duration = this.player.duration; this.duration = this.player.duration;
}; };
this.player.onseeking = () => { this.player.onseeking = () => {
this.player.pause(); this.player.pause();
...@@ -171,6 +185,9 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy { ...@@ -171,6 +185,9 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy {
const player = event.target; const player = event.target;
this.currentTime = player.currentTime; this.currentTime = player.currentTime;
this.progress = Math.floor((player.currentTime / player.duration) * 100); this.progress = Math.floor((player.currentTime / player.duration) * 100);
this.duration = this.player.duration;
} }
onBtnQuickSeek(delta: number) { onBtnQuickSeek(delta: number) {
......
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