Commit 7dd01852 authored by liujiangnan's avatar liujiangnan

feat: 截取封皮

parent a7becf21
...@@ -20,39 +20,7 @@ ...@@ -20,39 +20,7 @@
<span>{{ uploading ? 'Uploading' : 'Select Video' }}</span> <span>{{ uploading ? 'Uploading' : 'Select Video' }}</span>
<!--<span>Select Video</span>--> <!--<span>Select Video</span>-->
</button> </button>
</nz-upload> </nz-upload>
<!--<button nz-button nzType="primary" *ngIf="showUploadBtn"-->
<!--style="margin-right: 1rem"-->
<!--type="button"-->
<!--[nzLoading]="uploading"-->
<!--(click)="handleUpload()"-->
<!--[disabled]="!videoFile || uploading">-->
<!--<i nz-icon type="upload" theme="outline"></i>-->
<!--<span>{{ uploading ? 'Uploading' : 'Start Upload' }}</span>-->
<!--</button>-->
<!--
<button type="button"
(click)="extraCover()"
nz-button nzType="default"
[disabled]=" !(videoUrl && videoUrl.constructor.name === 'String')">设置封面</button>
-->
<!--
<nz-divider></nz-divider>
<div [style.display]="!uploading?'none':''" style="position:relative">
<div style="width: calc( 100% - 20px);">
<nz-progress [nzPercent]="progress">
</nz-progress>
</div>
<i (click)="cancelUpload()" class="anticon anticon-close-circle" style="position: absolute;top: 50%;right: 0;transform: translateY(-50%);cursor: pointer"></i>
</div>
-->
</div> </div>
<div class="p-box d-flex align-items-center p-video-uploader"> <div class="p-box d-flex align-items-center p-video-uploader">
...@@ -82,7 +50,7 @@ ...@@ -82,7 +50,7 @@
</div> </div>
<div class="p-preview" *ngIf="!uploading && videoUrl " > <div class="p-preview" *ngIf="!uploading && videoUrl " >
<!--<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>--> <!--<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>-->
<video [src]="safeVideoUrl(videoUrl)" controls #videoNode></video> <!-- <video [src]="safeVideoUrl(videoUrl)" controls #videoNode></video> -->
</div> </div>
</div> </div>
<div [style.display]="!checkVideoExists?'none':''"> <div [style.display]="!checkVideoExists?'none':''">
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
display: block; display: block;
width: 100%; width: 100%;
height: 0; height: 0;
padding-bottom: 56.25%; // padding-bottom: 56.25%;
.p-box { .p-box {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -72,16 +72,14 @@ p-progress-bar { ...@@ -72,16 +72,14 @@ p-progress-bar {
line-height: 1.5rem; line-height: 1.5rem;
} }
.p-preview { .p-preview {
width: 100%; width: 50px;
height: 100%; height: 50px;
//background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"); //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
} }
.p-preview video{ .p-preview video{
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
position: absolute;
display: flex;
} }
.p-btn-delete { .p-btn-delete {
position: absolute; position: absolute;
......
...@@ -7,6 +7,14 @@ ...@@ -7,6 +7,14 @@
} }
.courseware-container {
margin-top: 80px;
}
.courseware-video {
width: 400px;
}
.radioPaire { .radioPaire {
float: left; float: left;
margin: 3px; margin: 3px;
......
...@@ -4,4 +4,32 @@ ...@@ -4,4 +4,32 @@
<app-upload-video [videoUrl]="item.video_url" (videoUploaded)="onVideoUploaded($event)"></app-upload-video> <app-upload-video [videoUrl]="item.video_url" (videoUploaded)="onVideoUploaded($event)"></app-upload-video>
</div> </div>
</div> </div>
<div *ngIf="item.video_url" nz-row class="courseware-container d-flex " #videoContainer>
<div nz-col nzSpan="24" class="-col-12" style="text-align: left; padding-left: 30px;">
<video class="courseware-video"
crossorigin="anonymous"
*ngIf="item.video_url "
[src]="item.video_url" controls
(loadeddata)="videoLoaded($event,item)"
(error)="videoError($event)"
(seeked)="videoSeeked($event)"
#videoNode ></video>
<div *ngIf="!item.video_url">
<div class="p-video-box d-flex align-items-center">
<div class="p-upload-icon">
<i class="anticon anticon-caret-right"></i>
<div class="m-3"></div>
</div>
</div>
</div>
</div>
<div nz-col nzSpan="24" class="-col-12" style="text-align: left; padding-left: 30px;">
<button nz-button nzType="primary"
style="margin-bottom: 1rem; float: left;"
(click)="setVideoCover()">
Set Video Cover
</button>
</div>
</div>
</div> </div>
\ No newline at end of file
import { Component, OnDestroy, OnChanges, OnInit, ApplicationRef, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core'; import { Component, OnDestroy, OnChanges, OnInit, ApplicationRef, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core';
import { ComponentBase } from './ComponentBase'; import { ComponentBase } from './ComponentBase';
import { MetaFormCreator } from './mataFormCreator'; import { MetaFormCreator } from './mataFormCreator';
import { NzMessageService } from 'ng-zorro-antd'; import {NzMessageService, NzMessageDataFilled} from 'ng-zorro-antd';
import {HttpClient, HttpEvent, HttpEventType, HttpRequest} from '@angular/common/http';
let replaceAll = function (str, s1, s2) { let replaceAll = function (str, s1, s2) {
return str.replace(new RegExp(s1, "gm"), s2); return str.replace(new RegExp(s1, "gm"), s2);
...@@ -15,12 +16,28 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O ...@@ -15,12 +16,28 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
// 储存数据用 // 储存数据用
saveKey = "cartoon_video"; saveKey = "cartoon_video";
@ViewChild('videoContainer')
videoContainer: ElementRef;
@ViewChild('videoNode')
videoNode: ElementRef;
newVideoCover = true;
private tooBigError: NzMessageDataFilled = null;
uploadUrl;
uploadData;
item = { item = {
video_url: "", video_url: "",
pic_id: ""
}; };
constructor(public nzMessageService: NzMessageService, public appRef: ApplicationRef, public changeDetectorRef: ChangeDetectorRef) { constructor(public nzMessageService: NzMessageService, private http: HttpClient, public appRef: ApplicationRef, public changeDetectorRef: ChangeDetectorRef) {
super(appRef, changeDetectorRef); super(appRef, changeDetectorRef);
this.uploadUrl = (<any> window).courseware.uploadUrl();
} }
init(): void { init(): void {
} }
...@@ -35,4 +52,82 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O ...@@ -35,4 +52,82 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this.save(); this.save();
} }
videoLoaded(evt, 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.origin_video_url && item.origin_video_url.startsWith('http') ) {
item.video_preview_thumb = null;
return;
}
// item.video_preview_thumb = null;
this.newVideoCover = true;
video.currentTime = .1;
}
videoError(evt) {
this.nzMessageService.error('video error');
}
videoSeeked(evt) {
return;
}
setVideoCover() {
if (!this.videoNode) {
return;
}
const video = this.videoNode.nativeElement;
if (!video.src) { return; }
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth ;
canvas.height = video.videoHeight ;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
const video_preview_thumb = canvas.toDataURL();
canvas.remove();
const img = this.convertImageToBlob(video_preview_thumb);
const formData = new FormData();
const ext = img.type.replace('image/', '');
formData.append('file', img, `cover.${ext}`);
this.http.post(this.uploadUrl, formData).subscribe(
(res: any) => {
(window as any).courseware.sendEvent("screenshot", {"url": res.url}, this.saveKey);
this.item.pic_id = res.url;
this.save();
},
(err) => {
console.log(err);
this.nzMessageService.error('封面截取失败');
}
);
}
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});
}
} }
\ No newline at end of file
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