Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
J
jj_video_practice
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
jj_video_practice
Commits
a4dcd6d6
Commit
a4dcd6d6
authored
Dec 23, 2025
by
kingweight
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
视频预览
parent
420c6999
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
54 additions
and
2 deletions
+54
-2
form.component.html
src/app/form/form.component.html
+5
-1
form.component.ts
src/app/form/form.component.ts
+49
-1
No files found.
src/app/form/form.component.html
View file @
a4dcd6d6
...
@@ -236,6 +236,10 @@
...
@@ -236,6 +236,10 @@
</video>
</video>
</div>
</div>
<div
style=
"margin-bottom: 20px; text-align: end;"
id=
"video-preview-btn"
>
<button
nz-button
nzType=
"primary"
(
click
)="
onVideoPreview
()"
>
效果试看
</button>
</div>
<!-- 视频帧轨道 -->
<!-- 视频帧轨道 -->
<div
style=
"margin-bottom: 20px;"
>
<div
style=
"margin-bottom: 20px;"
>
<div
style=
"display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;"
>
<div
style=
"display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;"
>
...
@@ -278,7 +282,7 @@
...
@@ -278,7 +282,7 @@
(
ngModelChange
)="
onFragmentTrackChange
($
event
)"
(
ngModelChange
)="
onFragmentTrackChange
($
event
)"
(
nzOnBeforeChange
)="
onFragmentTrackStart
()"
(
nzOnBeforeChange
)="
onFragmentTrackStart
()"
(
nzOnAfterChange
)="
onFragmentTrackEnd
()"
(
nzOnAfterChange
)="
onFragmentTrackEnd
()"
[
nzTooltipVisible
]="
'
always
'"
>
[
nzTooltipVisible
]="
isFragmentModalVisible
?
'
always
'
:
'
never
'"
>
</nz-slider>
</nz-slider>
</div>
</div>
...
...
src/app/form/form.component.ts
View file @
a4dcd6d6
...
@@ -55,6 +55,8 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
...
@@ -55,6 +55,8 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
thumbnailCount
=
20
;
// 生成的缩略图数量
thumbnailCount
=
20
;
// 生成的缩略图数量
thumbnailCache
:
Map
<
string
,
{
thumbnails
:
string
[],
duration
:
number
,
count
:
number
}
>
=
new
Map
();
// 缩略图缓存
thumbnailCache
:
Map
<
string
,
{
thumbnails
:
string
[],
duration
:
number
,
count
:
number
}
>
=
new
Map
();
// 缩略图缓存
@
ViewChild
(
'
thumbnailContainer
'
,
{
static
:
false
})
thumbnailContainer
:
ElementRef
;
// 缩略图容器引用
@
ViewChild
(
'
thumbnailContainer
'
,
{
static
:
false
})
thumbnailContainer
:
ElementRef
;
// 缩略图容器引用
isPreviewing
=
false
;
// 是否正在预览播放
previewTargetTime
=
0
;
// 预览目标时间
...
@@ -227,6 +229,12 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
...
@@ -227,6 +229,12 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
// 视频片段弹窗 - 取消
// 视频片段弹窗 - 取消
fragmentModalCancel
()
{
fragmentModalCancel
()
{
// 如果正在预览,停止播放
if
(
this
.
isPreviewing
&&
this
.
fragmentVideoElement
)
{
this
.
fragmentVideoElement
.
pause
();
this
.
isPreviewing
=
false
;
}
this
.
isFragmentModalVisible
=
false
;
this
.
isFragmentModalVisible
=
false
;
this
.
currentFragmentQues
=
null
;
this
.
currentFragmentQues
=
null
;
this
.
currentFragmentIndex
=
-
1
;
this
.
currentFragmentIndex
=
-
1
;
...
@@ -237,6 +245,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
...
@@ -237,6 +245,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this
.
isDraggingTrack
=
false
;
this
.
isDraggingTrack
=
false
;
this
.
videoThumbnails
=
[];
// 只清除当前显示的缩略图,保留缓存
this
.
videoThumbnails
=
[];
// 只清除当前显示的缩略图,保留缓存
this
.
isGeneratingThumbnails
=
false
;
this
.
isGeneratingThumbnails
=
false
;
this
.
previewTargetTime
=
0
;
}
}
// 清除指定视频的缩略图缓存
// 清除指定视频的缩略图缓存
...
@@ -438,8 +447,18 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
...
@@ -438,8 +447,18 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
// 视频时间更新
// 视频时间更新
onFragmentVideoTimeUpdate
(
event
)
{
onFragmentVideoTimeUpdate
(
event
)
{
const
video
=
event
.
target
;
// 如果正在预览,检查是否到达目标时间
if
(
this
.
isPreviewing
&&
video
.
currentTime
>=
this
.
previewTargetTime
)
{
video
.
pause
();
video
.
currentTime
=
this
.
previewTargetTime
;
this
.
isPreviewing
=
false
;
this
.
message
.
create
(
'
success
'
,
'
预览完成,已到达指定时间节点
'
);
return
;
}
if
(
!
this
.
isDraggingTrack
)
{
if
(
!
this
.
isDraggingTrack
)
{
const
video
=
event
.
target
;
this
.
fragmentVideoCurrentTime
=
video
.
currentTime
;
this
.
fragmentVideoCurrentTime
=
video
.
currentTime
;
const
previousSelectedIndex
=
Math
.
floor
(
this
.
fragmentSelectedTime
);
const
previousSelectedIndex
=
Math
.
floor
(
this
.
fragmentSelectedTime
);
this
.
fragmentSelectedTime
=
video
.
currentTime
;
this
.
fragmentSelectedTime
=
video
.
currentTime
;
...
@@ -451,6 +470,35 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
...
@@ -451,6 +470,35 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
}
}
}
}
// 效果试看:从0开始播放到指定时间节点
onVideoPreview
()
{
if
(
!
this
.
fragmentVideoElement
)
{
this
.
message
.
create
(
'
warning
'
,
'
视频未加载,请稍候再试
'
);
return
;
}
if
(
!
this
.
fragmentSelectedTime
||
this
.
fragmentSelectedTime
<=
0
)
{
this
.
message
.
create
(
'
warning
'
,
'
请先选择时间节点
'
);
return
;
}
const
video
=
this
.
fragmentVideoElement
;
// 设置预览目标时间
this
.
previewTargetTime
=
this
.
fragmentSelectedTime
;
this
.
isPreviewing
=
true
;
// 跳转到0秒并开始播放
video
.
currentTime
=
0
;
video
.
play
().
then
(()
=>
{
this
.
message
.
create
(
'
info
'
,
'
开始预览,将播放到
'
+
this
.
formatTime
(
this
.
previewTargetTime
));
}).
catch
((
error
)
=>
{
console
.
error
(
'
播放失败:
'
,
error
);
this
.
message
.
create
(
'
error
'
,
'
播放失败,请检查视频
'
);
this
.
isPreviewing
=
false
;
});
}
// 轨道拖动开始
// 轨道拖动开始
onFragmentTrackStart
()
{
onFragmentTrackStart
()
{
this
.
isDraggingTrack
=
true
;
this
.
isDraggingTrack
=
true
;
...
...
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