Commit 7cde1a27 authored by liujiaxin's avatar liujiaxin

add video cover

parent 616826b2
<div class="courseware-container d-flex row" #videoContainer>
<div class="col-8">
<div nz-row class="courseware-container d-flex " #videoContainer>
<div nz-col nzSpan="16" class="-col-8" style="text-align: center;">
<video class="courseware-video"
crossorigin="anonymous"
*ngIf="item.contentObj.video_url "
......@@ -18,21 +18,25 @@
</div>
</div>
</div>
<div class="col-4">
<div nz-col nzSpan="4" class="-col-4" style=" display: flex;
justify-content: center;">
<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.pic_id && item.contentObj.video_url">
<div class="col-8">
<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 class="row" style="margin-top: 1rem"
*ngIf="item.contentObj.video_url">
<div class="col-8">
<img *ngIf="item.contentObj.pic_id"
[src]="item.contentObj.pic_id"
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 {NzMessageService, NzMessageDataFilled} from 'ng-zorro-antd';
import {HttpClient, HttpEvent, HttpEventType, HttpRequest} from '@angular/common/http';
@Component({
......@@ -22,10 +23,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
private tooBigError: NzMessageDataFilled = null;
uploadUrl;
uploadData;
constructor(private appRef: ApplicationRef,
private http: HttpClient,
private changeDetectorRef: ChangeDetectorRef,
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 {
this.nzMessageService.error('video error');
}
videoSeeked(evt) {
return
const video = evt.target;
if (video.src && video.src.startsWith('blob:')) {
return;
......@@ -115,8 +129,18 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
const img = this.convertImageToBlob(video_preview_thumb);
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) {
......
......@@ -13,7 +13,11 @@
</video>
<div class="video-cover" *ngIf="initCover && !isPlaying">
<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 class="k-play-btn" *ngIf="!isPlayStarted && hasVideo" (click)="playVideo()">
<i class="anticon anticon-play-circle-o"></i>
......
......@@ -47,7 +47,7 @@ export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
if (data && typeof data === 'object') {
this.data = data;
}
this.hasVideo = !!this.data.contentObj.video_url
this.hasVideo = !!this.data.contentObj.video_url;
window["air"].hideAirClassLoading(this.saveKey, this.data);
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