Commit 5dfcd1ef authored by limingzhe's avatar limingzhe

first

parent 3747dd67
...@@ -81,7 +81,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -81,7 +81,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
handleChange(info: { type: string, file: UploadFile, event: any }): void { handleChange(info: { type: string, file: UploadFile, event: any }): void {
console.log('info:' , info); // console.log('info:' , info);
switch (info.type) { switch (info.type) {
case 'start': case 'start':
...@@ -102,6 +102,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -102,6 +102,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
case 'success': case 'success':
console.log('success');
this.uploadSuccess(info.file); this.uploadSuccess(info.file);
// this.beforeUpload(info.file); // this.beforeUpload(info.file);
...@@ -110,7 +111,9 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -110,7 +111,9 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
break; break;
case 'progress': case 'progress':
this.progress = parseInt(info.event.percent, 10); this.progress = parseInt(info.event.percent, 10);
this.doProgress(this.progress); // this.doProgress(this.progress);
// console.log('progress: ', this.progress);
break; break;
} }
} }
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
[src]="item.contentObj.video_url | resource" controls [src]="item.contentObj.video_url | resource" controls
(loadeddata)="videoLoaded($event,item)" (loadeddata)="videoLoaded($event,item)"
(error)="videoError($event)" (error)="videoError($event)"
(seeked)="videoSeeked($event, false)" (seeked)="videoSeeked($event)"
#videoNode ></video> #videoNode ></video>
<!--&& item.contentObj.video_url.constructor.name === 'String'--> <!--&& item.contentObj.video_url.constructor.name === 'String'-->
<div *ngIf="!item.contentObj.video_url"> <div *ngIf="!item.contentObj.video_url">
......
...@@ -70,6 +70,8 @@ export class FormComponent implements OnInit, OnChanges { ...@@ -70,6 +70,8 @@ export class FormComponent implements OnInit, OnChanges {
// }); // });
// } // }
this.item = {};
this.item.contentObj = {};
const getData = (<any> window).courseware.getData; const getData = (<any> window).courseware.getData;
getData((data) => { getData((data) => {
......
<!--<div>-->
<!--<h1>{{aaa.a}}</h1>-->
<div <div
class="p-courseware-video" class="p-courseware-video"
[style.background-image]="hasVideo ? '' : 'url(assets/default/video-not-upload.jpg)'" [style.background-image]="hasVideo ? '' : 'url(assets/default/video-not-upload.jpg)'"
> >
<!--<h1 style="color: #ffffff">{{aaa.a}}</h1>-->
<video *ngIf="hasVideo" <video *ngIf="hasVideo"
[src]="data.contentObj.video_url" [src]="data.contentObj.video_url"
width="100%" height="100%" width="100%" height="100%"
...@@ -38,12 +47,7 @@ ...@@ -38,12 +47,7 @@
<div class="i-cursor" [style.left]="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-video-control-time-total">{{duration | time}}</div>
<!--<div class="k-video-control-tool">-->
<!--<div class="i-tool-btn" (tap)="onBtnQuickSeek(-10)">-10</div>-->
<!--<div class="i-tool-btn" (tap)="onBtnQuickSeek(-5)">-5</div>-->
<!--<div class="i-tool-btn" (tap)="onBtnQuickSeek(5)">+5</div>-->
<!--<div class="i-tool-btn" (tap)="onBtnQuickSeek(10)">+10</div>-->
<!--</div>-->
</div> </div>
</div> </div>
import {AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core'; import {AfterViewInit, ApplicationRef, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
@Component({ @Component({
selector: 'app-play', selector: 'app-play',
...@@ -24,14 +24,18 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy { ...@@ -24,14 +24,18 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy {
KEY = 'dfzx_03'; KEY = 'dfzx_03';
playBtnImg = ''; playBtnImg = '';
// aaa;
constructor() {
constructor(private appRef: ApplicationRef) {
} }
ngOnInit() { ngOnInit() {
// console.log(this.data.contentObj) // console.log(this.data.contentObj)
// this.hasVideo = !!this.data.contentObj.video_url && typeof this.data.contentObj.video_url === 'string'; // this.hasVideo = !!this.data.contentObj.video_url && typeof this.data.contentObj.video_url === 'string';
this.data = {};
this.data.contentObj = {};
const getData = (<any> window).courseware.getData; const getData = (<any> window).courseware.getData;
getData((data) => { getData((data) => {
...@@ -42,19 +46,43 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy { ...@@ -42,19 +46,43 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy {
this.data = {}; this.data = {};
} }
console.log('data:' , data); console.log('data:' , this.data);
if (!this.data.contentObj) { if (!this.data.contentObj) {
this.data.contentObj = {}; this.data.contentObj = {};
this.data.contentObj.video_url = 'assets/default/demo.mp4';
// this.initDefaultData();
} }
this.initDefaultData();
console.log('this.data.contentObj.video_url: ', this.data.contentObj.video_url);
this.hasVideo = !!this.data.contentObj.video_url && typeof this.data.contentObj.video_url === 'string'; this.hasVideo = !!this.data.contentObj.video_url && typeof this.data.contentObj.video_url === 'string';
console.log('hasVideo: ', this.hasVideo);
this.playBtnImg = 'assets/play/btn-play.png'; this.playBtnImg = 'assets/play/btn-play.png';
this.refresh();
}, this.KEY); }, this.KEY);
// this.aaa = {a: 1};
// setInterval(() => {
// this.aaa.a ++;
// }, 1000);
setInterval(() => {
this.refresh();
}, 1000);
}
initDefaultData() {
if (!this.data.contentObj.video_url) {
this.data.contentObj.video_url = 'assets/default/demo.mp4';
}
} }
playVideo() { playVideo() {
...@@ -62,6 +90,15 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy { ...@@ -62,6 +90,15 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy {
if (!this.videoNodeRef) { if (!this.videoNodeRef) {
return; return;
} }
if (!this.player) {
this.ngAfterViewInit();
}
if (!this.player) {
console.log(' player not exist');
return;
}
this.initCover = false; this.initCover = false;
if (this.player.paused) { if (this.player.paused) {
const playPromise = this.player.play(); const playPromise = this.player.play();
...@@ -84,9 +121,13 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy { ...@@ -84,9 +121,13 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy {
} else { } else {
this.player.pause(); this.player.pause();
} }
this.refresh();
} }
ngAfterViewInit() { ngAfterViewInit() {
console.log(' in ngAfterViewInit');
if (!this.videoNodeRef) { if (!this.videoNodeRef) {
return; return;
} }
...@@ -113,6 +154,8 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy { ...@@ -113,6 +154,8 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy {
}; };
this.player.addEventListener("ended", () => { this.player.addEventListener("ended", () => {
this.playBtnImg = 'assets/play/btn-replay.png'; this.playBtnImg = 'assets/play/btn-replay.png';
this.refresh();
}) })
setTimeout(() => { setTimeout(() => {
this.initCover = this.data.contentObj.video_cover_url; this.initCover = this.data.contentObj.video_cover_url;
...@@ -148,4 +191,11 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy { ...@@ -148,4 +191,11 @@ export class PlayComponent implements AfterViewInit, OnInit, OnDestroy {
const {target, offsetX} = event; const {target, offsetX} = event;
this.player.currentTime = this.player.duration * offsetX / target.clientWidth; this.player.currentTime = this.player.duration * offsetX / target.clientWidth;
} }
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
} }
This diff is collapsed.
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