Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
C
cartoon_video
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
cartoon_video
Commits
7dd01852
Commit
7dd01852
authored
Feb 06, 2025
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 截取封皮
parent
a7becf21
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
137 additions
and
40 deletions
+137
-40
upload-video.component.html
form/src/app/common/upload-video/upload-video.component.html
+1
-33
upload-video.component.scss
form/src/app/common/upload-video/upload-video.component.scss
+3
-5
form.component.css
form/src/app/form/form.component.css
+8
-0
form.component.html
form/src/app/form/form.component.html
+28
-0
form.component.ts
form/src/app/form/form.component.ts
+97
-2
No files found.
form/src/app/common/upload-video/upload-video.component.html
View file @
7dd01852
...
...
@@ -20,39 +20,7 @@
<span>
{{ uploading ? 'Uploading' : 'Select Video' }}
</span>
<!--<span>Select Video</span>-->
</button>
</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
class=
"p-box d-flex align-items-center p-video-uploader"
>
...
...
@@ -82,7 +50,7 @@
</div>
<div
class=
"p-preview"
*
ngIf=
"!uploading && videoUrl "
>
<!--<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
[
style
.
display
]="!
checkVideoExists
?'
none
'
:
''"
>
...
...
form/src/app/common/upload-video/upload-video.component.scss
View file @
7dd01852
...
...
@@ -21,7 +21,7 @@
display
:
block
;
width
:
100%
;
height
:
0
;
padding-bottom
:
56
.25%
;
//
padding-bottom: 56.25%;
.p-box
{
position
:
absolute
;
left
:
0
;
...
...
@@ -72,16 +72,14 @@ p-progress-bar {
line-height
:
1
.5rem
;
}
.p-preview
{
width
:
100%
;
height
:
100%
;
width
:
50px
;
height
:
50px
;
//background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
}
.p-preview
video
{
max-height
:
100%
;
max-width
:
100%
;
position
:
absolute
;
display
:
flex
;
}
.p-btn-delete
{
position
:
absolute
;
...
...
form/src/app/form/form.component.css
View file @
7dd01852
...
...
@@ -7,6 +7,14 @@
}
.courseware-container
{
margin-top
:
80px
;
}
.courseware-video
{
width
:
400px
;
}
.radioPaire
{
float
:
left
;
margin
:
3px
;
...
...
form/src/app/form/form.component.html
View file @
7dd01852
...
...
@@ -4,4 +4,32 @@
<app-upload-video
[
videoUrl
]="
item
.
video_url
"
(
videoUploaded
)="
onVideoUploaded
($
event
)"
></app-upload-video>
</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>
\ No newline at end of file
form/src/app/form/form.component.ts
View file @
7dd01852
import
{
Component
,
OnDestroy
,
OnChanges
,
OnInit
,
ApplicationRef
,
ChangeDetectorRef
,
ViewChild
,
ElementRef
}
from
'
@angular/core
'
;
import
{
ComponentBase
}
from
'
./ComponentBase
'
;
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
)
{
return
str
.
replace
(
new
RegExp
(
s1
,
"
gm
"
),
s2
);
...
...
@@ -15,12 +16,28 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
// 储存数据用
saveKey
=
"
cartoon_video
"
;
@
ViewChild
(
'
videoContainer
'
)
videoContainer
:
ElementRef
;
@
ViewChild
(
'
videoNode
'
)
videoNode
:
ElementRef
;
newVideoCover
=
true
;
private
tooBigError
:
NzMessageDataFilled
=
null
;
uploadUrl
;
uploadData
;
item
=
{
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
);
this
.
uploadUrl
=
(
<
any
>
window
).
courseware
.
uploadUrl
();
}
init
():
void
{
}
...
...
@@ -35,4 +52,82 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
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
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment