Commit 16a0ae2a authored by limingzhe's avatar limingzhe

first

parent 1f535d89
......@@ -44,7 +44,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@ViewChild('canvas') canvas: ElementRef;
@ViewChild('wrap') wrap: ElementRef;
@HostListener('window:resize', ['$event'])
// @HostListener('window:resize', ['$event'])
canvasWidth = 1280;
canvasHeight = 720;
......@@ -68,7 +68,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
images = new Map();
animationId: any;
winResizeEventStream = new Subject();
// winResizeEventStream = new Subject();
canvasLeft;
canvasTop;
......@@ -95,7 +95,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onResize(event) {
this.winResizeEventStream.next();
// this.winResizeEventStream.next();
}
......@@ -655,11 +655,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initListener() {
this.winResizeEventStream
.pipe(debounceTime(500))
.subscribe(data => {
this.renderAfterResize();
});
// this.winResizeEventStream
// .pipe(debounceTime(500))
// .subscribe(data => {
// this.renderAfterResize();
// });
if (this.IsPC()) {
......
<div class="courseware-container d-flex">
<div class="gutter" style="width: 100%;">
<app-lesson-title-config
(titleUpdated)="updateTitleObjSuccess($event)"
[withIcon]="false"
[titleObj]="titleObj">
</app-lesson-title-config>
<nz-divider></nz-divider>
<div class="courseware-container d-flex row" #videoContainer>
<div class="col-8">
<!--crossorigin="anonymous"-->
<video class="courseware-video"
crossorigin="anonymous"
*ngIf="item.contentObj.video_url "
[src]="item.contentObj.video_url | resource" controls
(loadeddata)="videoLoaded($event,item)"
(error)="videoError($event)"
(seeked)="videoSeeked($event)"
#videoNode ></video>
<!--&& item.contentObj.video_url.constructor.name === 'String'-->
<div *ngIf="!item.contentObj.video_url">
<div class="p-video-box d-flex align-items-center">
<div class="p-upload-icon">
<!--<i class="anticon anticon-caret-right"></i>-->
<i nz-icon type="caret-right" theme="outline"></i>
<div class="m-3"></div>
</div>
</div>
</div>
</div>
<div class="col-4">
<app-upload-video
(videoUploaded)="onVideoUploadSuccess($event)"
[item]="item"
[videoUrl]="item.contentObj.video_url"></app-upload-video>
</div>
</div>
<div class="row" style="margin-top: 1rem"
*ngIf="item.contentObj.video_id && item.contentObj.video_url && item.contentObj.video_url.constructor.name === 'String'">
<div class="col-8">
<button nz-button nzType="primary"
style="margin-bottom: 1rem"
(click)="setVideoCover()">
Set Video Cover
</button>
<!--crossOrigin="anonymous"-->
<img *ngIf="item.contentObj.pic_id"
[src]="item.contentObj.pic_id | resource"
style="width:100%;overflow: hidden;box-shadow: 0 0 20px 0px #444;"/>
<app-upload-image-with-preview
[picUrl]="item.contentObj.video_cover_url"
(imageUploaded)="onCoverUploadSuccess($event)"
[picItem]="coverImg"
[disableUpload]="true"
[TIP]="' '"
[iconSize]="0"
style="width:100%;overflow: hidden;box-shadow: 0 0 20px 0px #444;">
</app-upload-image-with-preview>
</div>
</div>
@import '../style/common_mixin';
.tw{
display: flex;
.t{
flex: 1 1 auto;
margin-right: 2rem;
}
.a{
.p-video-box{
bottom: 0;
border: 2px dashed #ddd;
border-radius: 0.5rem;
background-color: #fafafa;
text-align: center;
color: #aaa;
padding-top: 56.25%;
font-size: 4rem;
.p-upload-icon{
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50% ,-50%);
}
}
.aud-w{
width: 100%;
display: flex;
justify-content: center;
margin-top: 1.5rem;
.courseware-container{
.courseware-video{
//position: absolute;
width: 95%;
max-height: calc(100vh - 5rem);
}
}
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef} from '@angular/core';
import * as _ from 'lodash';
import {
ApplicationRef,
Component,
ElementRef,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
ViewChild
} from '@angular/core';
import {NzMessageDataFilled, NzMessageService} from 'ng-zorro-antd';
@Component({
// providers:[UploadImageWithPreviewComponent ],
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit, OnChanges, OnDestroy {
export class FormComponent implements OnInit, OnChanges {
// @Input()
item;
@ViewChild('videoContainer')
videoContainer: ElementRef;
@ViewChild('videoNode')
videoNode: ElementRef;
@Output()
update = new EventEmitter();
newVideoCover = true;
coverImg: any = null;
// titleObj = {
// audio_url: 'http://iplayabc-courseware.oss-cn-beijing.aliyuncs.com/dev/imman/audios/d108d5d06105fda0526059a3e372f926.mp3',
// content: 'what is this?&nbsp;',
// icons: [],
// type: 'a'
// };
titleObj = {
audio_url: '',
content: '',
icons: [],
type: ''
};
KEY = 'hw_002';
teststr = "";
private tooBigError: NzMessageDataFilled = null;
constructor(private appRef: ApplicationRef) {
}
constructor(private nzMessageService: NzMessageService,
private appRef: ApplicationRef) {
ngOnInit() {
let _this = this;
(<any>window).courseware.getData(function(data){
if(data){
_this.titleObj = data;
setTimeout(() => {
_this.appRef.tick();
}, 1);
}
});
}
}
safeVideoUrl(url) {
if (url && url.constructor.name === 'SafeUrlImpl') {
this.videoNode && this.videoNode.nativeElement.removeAttribute('crossorigin');
return url;
}
this.videoNode && this.videoNode.nativeElement.setAttribute('crossorigin', 'anonymous');
// console.log('safeVideoUrl', url)
return `${url}?t=${Math.random()}`;
// const d = this.sanitization.bypassSecurityTrustResourceUrl(url);
return `${url}`; // ?t=${Math.random() //this.sanitization.bypassSecurityTrustHtml(url);
}
ngOnChanges() {
console.log(1, 'ngOnChanges');
// if (typeof this.item.contentObj.video_url !== 'string') {
// // this.item.contentObj.video_url = '';
// setTimeout(() => {
// this.item.contentObj.video_url = '';
// });
// }
}
ngOnInit() {
console.log(2, 'ngOnInit');
// if (typeof this.item.contentObj.video_url !== 'string') {
// // this.item.contentObj.video_url = '';
// setTimeout(() => {
// this.item.contentObj.video_url = '';
// });
// }
this.item = {};
this.item.contentObj = {};
ngOnDestroy() {
const getData = (<any> window).courseware.getData;
getData((data) => {
if (data) {
this.item = data;
} else {
this.item = {};
this.item.contentObj = {};
}
console.log('data:', data);
// this.init();
// this.refresh();
}, this.KEY);
}
updateTitleObjSuccess(titleObj) {
this.titleObj = titleObj;
this.save();
videoLoaded(evt, item) {
// console.log(111, 'video loaded', item);
const video = evt.target;
if (video.src.startsWith('blob:') && video.videoWidth > 1280 && video.videoHeight > 720) {
this.tooBigError = this.nzMessageService.error('视频分辨率过大,请调整分辨率后上传,建议 1280x720', {nzDuration: 10 * 1000});
// video.src = null;
return ;
} else {
if (this.tooBigError && this.tooBigError.messageId) {
this.nzMessageService.remove(this.tooBigError.messageId);
this.tooBigError = null;
}
}
if (video.src && video.src.startsWith('blob:')) {
return;
}
if ( item.contentObj.origin_video_url && item.contentObj.origin_video_url.startsWith('http') ) {
item.video_preview_thumb = null;
return;
}
// item.video_preview_thumb = null;
this.newVideoCover = true;
video.currentTime = .1;
// setTimeout(() => {
// this.setVideoCover();
// }, 1500);
// this.videoSeeked(evt, item);
}
videoError(evt) {
this.nzMessageService.error('video error');
}
videoSeeked(evt) {
const video = evt.target;
if (video.src && video.src.startsWith('blob:')) {
return;
}
if (!this.item.contentObj.video_cover_url) {
this.setVideoCover();
this.newVideoCover = false;
}
}
setVideoCover() {
// console.log(111)
// (seeked)="videoSeeked($event, item)"
// if (!item.video_preview_thumb) {
if (!this.videoNode) {
return;
}
const video = this.videoNode.nativeElement;
if (!video.src) { return; }
// console.log(222, video.currentTime)
const canvas = document.createElement('canvas');
canvas.setAttribute('crossorigin', "anonymous");
canvas.width = video.videoWidth ;
canvas.height = video.videoHeight ;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
// item.video_preview_thumb = canvas.toDataURL();
const video_preview_thumb = canvas.toDataURL();
// console.log(video_preview_thumb.substr(0, 100));
// console.log('%c ', `font-size: 100px; background: url(${video_preview_thumb}) no-repeat;`);
canvas.remove();
// video.currentTime = 0;
// }
const img: any = this.convertImageToBlob(video_preview_thumb);
img.name = `video_${this.item.sid}_${Date.now()}_cover.png`;
this.coverImg = img;
onTitleAudioUploadSuccess(res) {
this.titleObj.audio_url = res.url;
// this.coverComponent.customUpload(img);
/*
const formData = new FormData();
formData.append('file', img);
this.coursewareService.uploadResource(formData).then(res => {
// console.log(res);
// console.log(1, this.item.contentObj.video_url);
this.item.contentObj.pic_id = res.res_id;
// const ndata = JSON.parse(JSON.stringify(this.item)); // Object.assign({}, this.item);
// if (typeof ndata.contentObj.video_url !== 'string') {
// delete ndata.contentObj.video_url;
// }
//
// console.log(2, ndata.contentObj.video_url);
// console.log(3, this.item.contentObj.video_url);
this.update.emit(this.item);
});
*/
}
onCoverUploadSuccess(e) {
this.coverImg = null;
this.item.contentObj.video_cover_id = e.res_id;
this.item.contentObj.video_cover_url = e.url;
this.update.emit(this.item);
}
convertImageToBlob(data) {
const imgType = data.substring(data.indexOf(':') + 1, data.indexOf(';'));
const binary = atob(data.split(',')[1]);
const array = [];
let i = 0;
while (i < binary.length) {
array.push (binary.charCodeAt(i));
i++;
}
return new Blob([ new Uint8Array(array) ], {type: imgType});
}
onVideoUploadSuccess(e) {
this.item.contentObj.video_url = e.url;
this.save();
}
save() {
(<any>window).courseware.setData(this.titleObj);
save() {
(<any> window).courseware.setData(this.item, null, this.KEY);
this.refresh();
}
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
}
<div class="player-preview-content" [ngStyle]="{'background-color': this.data.contentObj?.titleObj?.type === 'a' ? '#fce5e9' : '#d8eefb'}">
<app-player-content-wrapper>
<div [innerHTML]="data.contentObj.titleObj.content" style="
position: absolute;z-index:99;
display: inline-block;
left: 55px;
top: 20px;
cursor: pointer" (click)="playTitleAudio()"></div>
<div class="content" style = 'position: relative;width: 100%;height: 100%;display: flex;
justify-content: center;
align-items: flex-end;'>
<div class="letter-box">
<div class="letters" >
<div class="letter" *ngFor="let a of letters; let i = index"
[ngStyle]="{top: row(i) +'%', left: (10 + (i % 13) * 6.05) +'%'}">
<div class="l-box" (click)="clickItem($event, a)">
<img [src]="'assets/all-letters/letter-imgs/'+a +'.png'" alt="">
<div style="display: none">
<audio [src]="'assets/all-letters/letter-audios/'+fromCharCode(a)+'.mp3'" preload="auto"> </audio>
</div>
</div>
</div>
</div>
</div>
<div class="show-item-content"
*ngIf="showDetailFlag"
(click)="clickBg()">
<div style="width: 50%; height: 80%; margin-top: 2rem">
<img [src]="curItemUrl" style="height: 100%; width: auto;"
(click)="clickBigItem($event)">
</div>
</div>
<!--<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: 8%; 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>
</app-player-content-wrapper>
</div>
<div class="k-video-control-time-total">{{duration | time}}</div>
<div style="display: none">
<audio *ngIf="data.contentObj?.titleObj?.audio_url" #audioElement
[src]="data.contentObj?.titleObj?.audio_url" preload="auto"> </audio>
</div>
</div>
</div>
@import '../style/common_mixin';
.p-courseware-video {
height: 100%;
overflow: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
background-color: #333;
@include k-img-bg();
.video-cover{
//position: absolute;
//left: 0;
//right: 0;
//top: 0;
//bottom: 0;
//width: 100%;
//height: 100%;
}
video {
width: 100%;
height: 100%;
}
}
.player-preview-content {
.k-play-btn {
position: absolute;
//width: 12%;
top: 80%;
left: 88%;
font-size: 12vh;
color: #444;
background-color: white;
border-radius: 50%;
}
.bg-mask {
width: 100%;
height: 100%;
background-color: white;
.lesson-header{
width: 100%;
position: absolute;
top: 0;
background-color: rgba(0, 0, 0, 0.65);
}
.k-video-control {
position: absolute;
bottom: 1vh;
left: 0;
width: 100%;
height: 7.5%;
display: flex;
color: white;
padding: 0 8vh;
align-items: center;
&-bg {
position: absolute;
top: 0;
img{
width: 100%;
height: auto;
}
.title{
font-family: 'BerlinSansFBDemi-Bold';
color: #f5d11f;
font-size: 4vw;
font-weight: 900;
width: 15%;
height: 70%;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
line-height: 4vw;
}
}
.left-box{text-align: right;padding-right: 1rem}
.right-box{text-align: left;padding-left: 1rem}
.left-box, .right-box{
//width: 100%;
height: 100%;
position: relative;
.a, .b{
width: 30%;
height: 100%;
display: inline-block;
position: relative;
margin: 0 .5rem
}
.a{
width: 40%;
}
background-color: #333;
opacity: 0.5;
}
.letter-box {
//height: 100%;
&-time-past {
width: 3.5rem;
}
&-progress {
position: relative;
display: inline-block;
width: 100%;
flex: 1;
height: 100%;
//margin-top: 5%;
//margin-left: 8%;
//margin-right: 8%;
img{
max-width: 100%;
max-height: 100%;
//position: absolute;
//left: 0;
height: 100%;
display: flex;
align-items: center;
margin: 0 3%;
& > * {
pointer-events: none; // Ken video seek
}
.letters{
.i-bg {
position: absolute;
background-color: #aaa;
width: 100%;
height: 100%;
top: 0;
left: 0;
.letter{
position: absolute;
font-weight: 600;
//width: calc(100% / 13);
text-align: center;
--cw: calc(100% / 13);
width: var(--cw);
line-height: calc( var(--cw) * 13);
font-family: LiQiangXingShu;
padding: 0 1rem;
height: 20%;
font-size: 7vmin;
}
height: 10%;
border-radius: 1rem;
}
}
.l-box{
cursor: pointer;
width: 100%;
height: 100%;
display: flex;
flex-direction: column-reverse;
font-weight: 900;
img{
max-width: 100%;
max-height: 100%;
width: 100%;
height: auto;
.i-before-progress {
position: absolute;
height: 10%;
background-color: white;
border-radius: 1rem;
}
.i-cursor {
position: absolute;
width: 1.5vh;
height: 1.5vh;
border-radius: 50%;
background-color: white;
}
}
.show-item-content {
position: absolute;
width: 100%;
height: 100%;
//background-color:rgba(255,255,255,1);
&-time-total {
margin-right: 3vh;
}
&-tool {
display: flex;
align-items: center;
justify-content:center;
.i-tool-btn {
width: 4vh;
height: 4vh;
background-color: white;
border-radius: 50%;
margin: 0 1vh;
color: black;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.8vh;
font-weight: bold;
}
}
}
.anticon {
vertical-align: 0.25em !important;
}
import {
Component,
Input,
OnDestroy,
OnChanges,
OnInit,
AfterViewInit, ElementRef, ViewChild,
ApplicationRef
} from '@angular/core';
import * as _ from 'lodash';
import {AfterViewInit, ApplicationRef, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
@Component({
selector: 'app-play',
templateUrl: './play.component.html',
styleUrls: ['./play.component.scss']
// encapsulation: ViewEncapsulation.None,
})
export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
@ViewChild('audioElement')
audioElement: ElementRef;
data = {
contentObj:{titleObj:{
audio_url: 'http://iplayabc-courseware.oss-cn-beijing.aliyuncs.com/dev/imman/audios/d108d5d06105fda0526059a3e372f926.mp3',
content: 'what is this?&nbsp;',
icons: [],
type: 'a'
}}
};
letters = [];
lettersAscii = {};
titleAudio = null;
showDetailFlag = false;
curItemUrl = '';
curEvt;
export class PlayComponent implements AfterViewInit, OnInit, OnDestroy {
@Input() data;
@Input() sid;
@ViewChild('videoNode')
videoNodeRef: ElementRef;
@ViewChild('videoProgress')
videoProgressRef: ElementRef;
player: any;
progress = 0;
currentTime = 0;
duration = 0;
isPlaying = false;
hasVideo = false;
touchSeeking = false;
initCover = false;
KEY = 'hw_002';
playBtnImg = '';
// aaa;
constructor(private appRef: ApplicationRef) {
constructor(private appRef: ApplicationRef) {
}
range(start, end) {
return (new Array(end - start + 1)).fill(undefined).map((_, i) => i + start);
}
ngOnInit() {
let _this = this;
(<any>window).courseware.getData(function(data){
if(data){
_this.data.contentObj.titleObj.content = data.content;
setTimeout(() => {
_this.appRef.tick();
}, 1);
}
});
// const letters = _.shuffle( [...this.range(97, 122), ...this.range(65, 90)]);
[...this.range(97, 122), ...this.range(65, 90)].forEach(c => {
this.lettersAscii[c] = String.fromCharCode(c);
});
this.letters = _.shuffle(Object.keys(this.lettersAscii));
}
ngOnInit() {
// console.log(this.data.contentObj)
// this.hasVideo = !!this.data.contentObj.video_url && typeof this.data.contentObj.video_url === 'string';
ngOnDestroy() {
this.data = {};
this.data.contentObj = {};
}
const getData = (<any> window).courseware.getData;
getData((data) => {
ngOnChanges(data) {
if (data && typeof data == 'object') {
this.data = data;
} else {
this.data = {};
}
}
console.log('data:' , this.data);
if (!this.data.contentObj) {
this.data.contentObj = {};
}
ngAfterViewInit() {
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';
clickItem(e, a) {
console.log('hasVideo: ', this.hasVideo);
this.playBtnImg = 'assets/play/btn-play.png';
this.curEvt = e;
this.curItemUrl = 'assets/all-letters/letter-detail/' + a + '.png';
this.showDetailFlag = true;
}
clickBg() {
this.showDetailFlag = false;
}
clickBigItem(e) {
this.refresh();
e.cancelBubble = true;
this.playLetterAudio(this.curEvt);
}
}, this.KEY);
// this.aaa = {a: 1};
// setInterval(() => {
// this.aaa.a ++;
// }, 1000);
caseFolder(c) {
let folder = 'upper';
if (c.toLowerCase() === c) {
folder = 'lower';
}
return `${folder}/${c}.png`;
setInterval(() => {
this.refresh();
}, 1000);
}
row(i) {
const r = Math.floor(i / 13);
let y = (r * 20);
switch (r) {
case 0:
case 1:
y += 13;
break;
case 2:
case 3:
y += 15;
break;
initDefaultData() {
if (!this.data.contentObj.video_url) {
this.data.contentObj.video_url = 'assets/default/demo.mp4';
}
return y ;
}
lower(c) {
return c.toLowerCase();
}
fromCharCode(c) {
return String.fromCharCode(c).toLowerCase();
}
allLetters() {
}
playTitleAudio() {
this.titleAudio = this.audioElement ? this.audioElement.nativeElement : null;
if (!this.titleAudio) {
playVideo() {
// console.log(333333)
if (!this.videoNodeRef) {
return;
}
this.titleAudio.pause();
this.titleAudio.currentTime = 0;
this.titleAudio.play();
}
playLetterAudio(evt) {
const audios = document.querySelectorAll('audio');
for (let i = 0; i < audios.length; i++) {
audios[i].pause();
audios[i].currentTime = 0;
if (!this.player) {
this.ngAfterViewInit();
}
if (!this.player) {
console.log(' player not exist');
return;
}
const a = evt.target.parentNode.querySelector('audio');
// a.play();
const playPromise = a.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
console.log(1, _)
})
this.initCover = false;
if (this.player.paused) {
const playPromise = this.player.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
console.log('play', _);
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
console.log(2, error)
console.log('error', error);
});
}
this.playBtnImg = 'assets/play/btn-play.png';
} else {
this.player.pause();
}
this.refresh();
}
ngAfterViewInit() {
console.log(' in ngAfterViewInit');
if (!this.videoNodeRef) {
return;
}
this.player = this.videoNodeRef.nativeElement;
this.player.ontimeupdate = (event) => {
this.onTimeUpdate(event);
};
this.player.onloadedmetadata = () => {
this.currentTime = 0;
this.duration = this.player.duration;
};
this.player.onseeking = () => {
this.player.pause();
};
this.player.onseeked = () => {
this.player.play();
this.touchSeeking = false;
};
this.player.onplay = () => {
this.isPlaying = true;
};
this.player.onpause = () => {
this.isPlaying = false;
};
this.player.addEventListener("ended", () => {
this.playBtnImg = 'assets/play/btn-replay.png';
this.refresh();
})
setTimeout(() => {
this.initCover = this.data.contentObj.video_cover_url;
});
}
ngOnDestroy() {
}
onTimeUpdate(event) {
const player = event.target;
this.currentTime = player.currentTime;
this.progress = Math.floor((player.currentTime / player.duration) * 100);
}
onBtnQuickSeek(delta: number) {
this.player.currentTime += delta;
}
onProgressMouseDown(event) {
this.player.pause();
this.touchSeeking = true;
}
onProgressMouseMove(event) {
if (this.touchSeeking) {
const {target, offsetX} = event;
this.progress = Math.floor(offsetX / target.clientWidth * 100);
}
}
onProgressMouseUp(event) {
const {target, offsetX} = event;
this.player.currentTime = this.player.duration * offsetX / target.clientWidth;
}
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
}
This source diff could not be displayed because it is too large. You can view the blob instead.
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