Commit 7cde1a27 authored by liujiaxin's avatar liujiaxin

add video cover

parent 616826b2
<div class="courseware-container d-flex row" #videoContainer> <div nz-row class="courseware-container d-flex " #videoContainer>
<div class="col-8"> <div nz-col nzSpan="16" class="-col-8" style="text-align: center;">
<video class="courseware-video" <video class="courseware-video"
crossorigin="anonymous" crossorigin="anonymous"
*ngIf="item.contentObj.video_url " *ngIf="item.contentObj.video_url "
...@@ -18,21 +18,25 @@ ...@@ -18,21 +18,25 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-4"> <div nz-col nzSpan="4" class="-col-4" style=" display: flex;
justify-content: center;">
<app-upload-video <app-upload-video
(videoUploaded)="onVideoUploadSuccess($event)" (videoUploaded)="onVideoUploadSuccess($event)"
[item]="item" [item]="item"
[videoUrl]="item.contentObj.video_url"></app-upload-video> [videoUrl]="item.contentObj.video_url"></app-upload-video>
</div> </div>
<div nz-col nzSpan="4" style="text-align: center;">
<button nz-button nzType="primary"
style="margin-bottom: 1rem"
(click)="setVideoCover()">
Set Video Cover
</button>
</div>
</div> </div>
<div class="row" style="margin-top: 1rem" <div class="row" style="margin-top: 1rem"
*ngIf="item.contentObj.pic_id && item.contentObj.video_url"> *ngIf="item.contentObj.video_url">
<div class="col-8"> <div class="col-8">
<button nz-button nzType="primary"
style="margin-bottom: 1rem"
(click)="setVideoCover()">
Set Video Cover
</button>
<img *ngIf="item.contentObj.pic_id" <img *ngIf="item.contentObj.pic_id"
[src]="item.contentObj.pic_id" [src]="item.contentObj.pic_id"
style="width:100%;overflow: hidden;box-shadow: 0 0 20px 0px #444;"/> style="width:100%;overflow: hidden;box-shadow: 0 0 20px 0px #444;"/>
......
import {Component, ElementRef, ViewChild, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core'; import {Component, ElementRef, ViewChild, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';
import {NzMessageService, NzMessageDataFilled} from 'ng-zorro-antd'; import {NzMessageService, NzMessageDataFilled} from 'ng-zorro-antd';
import {HttpClient, HttpEvent, HttpEventType, HttpRequest} from '@angular/common/http';
@Component({ @Component({
...@@ -12,7 +13,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -12,7 +13,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
saveKey = 'ww_video'; saveKey = 'ww_video';
// 储存对象 // 储存对象
item; item;
@ViewChild('videoContainer') @ViewChild('videoContainer')
videoContainer: ElementRef; videoContainer: ElementRef;
@ViewChild('videoNode') @ViewChild('videoNode')
...@@ -22,10 +23,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -22,10 +23,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
private tooBigError: NzMessageDataFilled = null; private tooBigError: NzMessageDataFilled = null;
uploadUrl;
uploadData;
constructor(private appRef: ApplicationRef, constructor(private appRef: ApplicationRef,
private http: HttpClient,
private changeDetectorRef: ChangeDetectorRef, private changeDetectorRef: ChangeDetectorRef,
private nzMessageService: NzMessageService) { private nzMessageService: NzMessageService) {
this.uploadUrl = (<any> window).courseware.uploadUrl();
// this.uploadData = (<any> window).courseware.uploadData();
// window['air'] && (window['air'].getUploadCallback = (url, data) => {
// window['air'] && (window['air'].getUploadCallback = (url, data) => {
// console.log(url, data);
// this.uploadUrl = url;
// this.uploadData = data;
// });
} }
...@@ -88,6 +101,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -88,6 +101,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.nzMessageService.error('video error'); this.nzMessageService.error('video error');
} }
videoSeeked(evt) { videoSeeked(evt) {
return
const video = evt.target; const video = evt.target;
if (video.src && video.src.startsWith('blob:')) { if (video.src && video.src.startsWith('blob:')) {
return; return;
...@@ -115,8 +129,18 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -115,8 +129,18 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
const img = this.convertImageToBlob(video_preview_thumb); const img = this.convertImageToBlob(video_preview_thumb);
const formData = new FormData(); const formData = new FormData();
formData.append('file', img); const ext = img.type.replace('image/', '');
formData.append('file', img, `cover.${ext}`);
this.http.post(this.uploadUrl, formData).subscribe(
(res: any) => {
this.item.contentObj.pic_id = res.url;
this.save();
},
(err) => {
this.nzMessageService.error('封面截取失败');
}
);
} }
convertImageToBlob(data) { convertImageToBlob(data) {
...@@ -136,7 +160,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -136,7 +160,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save(); this.save();
} }
/** /**
* 储存数据 * 储存数据
*/ */
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
class="p-courseware-video" class="p-courseware-video"
[style.background-image]="hasVideo ? '' : 'url(assets/player/video-not-upload.jpg)'" [style.background-image]="hasVideo ? '' : 'url(assets/player/video-not-upload.jpg)'"
> >
<video *ngIf="hasVideo" <video *ngIf="hasVideo"
[src]="data.contentObj.video_url" [src]="data.contentObj.video_url"
width="100%" height="100%" width="100%" height="100%"
...@@ -13,7 +13,11 @@ ...@@ -13,7 +13,11 @@
</video> </video>
<div class="video-cover" *ngIf="initCover && !isPlaying"> <div class="video-cover" *ngIf="initCover && !isPlaying">
<img *ngIf="initCover" [src]="initCover" <img *ngIf="initCover" [src]="initCover"
style="width:100%;height:100%;"/> style="width: 100%;
height: 100%;
object-fit: contain;
max-width: 100%;
max-height: 100%;"/>
</div> </div>
<div class="k-play-btn" *ngIf="!isPlayStarted && hasVideo" (click)="playVideo()"> <div class="k-play-btn" *ngIf="!isPlayStarted && hasVideo" (click)="playVideo()">
<i class="anticon anticon-play-circle-o"></i> <i class="anticon anticon-play-circle-o"></i>
...@@ -37,6 +41,6 @@ ...@@ -37,6 +41,6 @@
<div class="i-tool-btn" (click)="onBtnQuickSeek(10)">+10</div> <div class="i-tool-btn" (click)="onBtnQuickSeek(10)">+10</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -29,7 +29,7 @@ export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni ...@@ -29,7 +29,7 @@ export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
touchSeeking = false; touchSeeking = false;
initCover = false; initCover = false;
isPlayStarted = false; isPlayStarted = false;
constructor(private appRef: ApplicationRef, constructor(private appRef: ApplicationRef,
public changeDetectorRef: ChangeDetectorRef) { public changeDetectorRef: ChangeDetectorRef) {
...@@ -47,7 +47,7 @@ export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni ...@@ -47,7 +47,7 @@ export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
if (data && typeof data === 'object') { if (data && typeof data === 'object') {
this.data = data; this.data = data;
} }
this.hasVideo = !!this.data.contentObj.video_url this.hasVideo = !!this.data.contentObj.video_url;
window["air"].hideAirClassLoading(this.saveKey, this.data); window["air"].hideAirClassLoading(this.saveKey, this.data);
this.refresh(); this.refresh();
......
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