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
8aa270b1
Commit
8aa270b1
authored
Dec 23, 2025
by
kingweight
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
视频帧轨道
parent
da662a60
Changes
2
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
390 additions
and
134 deletions
+390
-134
form.component.html
src/app/form/form.component.html
+10
-97
form.component.ts
src/app/form/form.component.ts
+380
-37
No files found.
src/app/form/form.component.html
View file @
8aa270b1
...
@@ -2,17 +2,10 @@
...
@@ -2,17 +2,10 @@
<div
class=
"model-content"
>
<div
class=
"model-content"
>
<!-- <div
id="drop-area"
(dragover)="onDragOver($event)"
(drop)="onDrop($event)"
>
拖拽文件到此区域进行批量上传
</div> -->
<div
style=
"width: 100%; display: inline-flex;flex-direction: row;flex-wrap: wrap;"
>
<div
style=
"width: 100%; display: inline-flex;flex-direction: row;flex-wrap: wrap;"
>
<div
style=
"width: 50% ; margin-left: 2.5%; min-width: 300px; max-width: 650px; margin-top: 20px;border: 2px dashed;padding: 20px 10px 5px 10px;"
<div
style=
"width: 50% ; margin-left: 2.5%; min-width: 300px; max-width: 650px; margin-top: 20px;border: 2px dashed;padding: 20px 10px 5px 10px;"
align=
'center'
>
align=
'center'
>
<div
style=
"width: 100px; background-color: white; transform: translateY(-30px);"
>
视频
</div>
<div
style=
"width: 100px; background-color: white; transform: translateY(-30px);"
>
视频
互动课信息
</div>
<div
style=
"margin: 20px; display: flex; align-items: center; "
>
<div
style=
"margin: 20px; display: flex; align-items: center; "
>
<h3
style=
"width: 120px;"
>
单元名称:
</h3>
<h3
style=
"width: 120px;"
>
单元名称:
</h3>
...
@@ -27,11 +20,10 @@
...
@@ -27,11 +20,10 @@
<app-upload-image-with-preview
style=
"width: 80%;"
[
picUrl
]="
item
.
cover
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
)"
>
<app-upload-image-with-preview
style=
"width: 80%;"
[
picUrl
]="
item
.
cover
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
)"
>
</app-upload-image-with-preview>
</app-upload-image-with-preview>
<app-upload-video
[
videoUrl
]="
item
.
video_url
.
replace
('.
mp4
',
'
_h
.
mp4
')"
[
showUploadBtn
]="
true
"
(
videoUploaded
)="
onVideoUploaded
($
event
)"
(
onCapture
)="
handleOnCapture
($
event
)"
(
parentRef
)="
onParentRef
($
event
)"
></app-upload-video>
<app-upload-video
[
videoUrl
]="
item
.
video_url
.
replace
('.
mp4
',
'
_h
.
mp4
')"
[
showUploadBtn
]="
true
"
(
videoUploaded
)="
onVideoUploaded
($
event
)"
(
onCapture
)="
handleOnCapture
($
event
)"
(
parentRef
)="
onParentRef
($
event
)"
></app-upload-video>
<div
style=
"padding: 5px 0;"
align=
'center'
>
<
!-- <
div style="padding: 5px 0;" align='center'>
<h3>视频地址</h3>
<h3>视频地址</h3>
<input type="text" nz-input [(ngModel)]="item.video_url" disabled (blur)="save()">
<input type="text" nz-input [(ngModel)]="item.video_url" disabled (blur)="save()">
</div>
</div> -->
<!-- <button style="margin-top: 10px; " (click)="onRemoveVideo()">删除视频</button> -->
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -210,88 +202,6 @@
...
@@ -210,88 +202,6 @@
</div>
</div>
<!-- <div style="margin-top:10px; border: 1px #ccc solid; border-radius: 15px; padding: 15px; background-color: rgb(248, 255, 245);">
<h3>设置选项:</h3>
<div style="margin: 10px;">
<div style="display: flex; align-items: center; justify-content:flex-start;">
<span style="margin-right: 20px;">选项类型:</span>
<label style="" nz-checkbox [(ngModel)]="ques.optionTypeText" (ngModelChange)="checkboxChange($event, ques, 'optionTypeText')">文本</label>
<label style="" nz-checkbox [(ngModel)]="ques.optionTypeAudio" (ngModelChange)="checkboxChange($event, ques, 'optionTypeAudio')">音频</label>
<label style="" nz-checkbox [(ngModel)]="ques.optionTypePic" (ngModelChange)="checkboxChange($event, ques, 'optionTypePic')">图片</label>
</div>
</div>
<div *ngFor="let option of ques.optionArr; let j = index"
style="border: 1px #ccc solid; border-radius: 15px; width: 100%; padding: 30px; ">
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: center;">
<h4>设置选项-{{j+1}}:</h4>
<div align="center" style="display: flex; align-items: center; justify-content: center;margin-top: -7px;">
<nz-radio-group [ngModel]="option.answer" (ngModelChange)="radioChange($event, option, 'answer')">
<div style="display: flex; flex-wrap: wrap; width: 100%;">
<label style="margin-left: 5px;" nz-radio [nzValue]="'isRight'">{{'正确'}}</label>
<label style="margin-left: 5px;" nz-radio [nzValue]="'isWrong'">{{'错误'}}</label>
</div>
</nz-radio-group>
</div>
</div>
<button style="float:right" nz-button nzType="danger" (click)="deleteOptionBtnClick(ques.optionArr, j)">
x
</button>
</div>
<div *ngIf="ques.optionTypeText" style="margin-top: 5px; display: flex; align-items: center; ">
<span style="">文本:</span>
<input type="text" nz-input [(ngModel)]="option.text" (blur)="save()" style=" width: 200px;">
</div>
<div *ngIf="ques.optionTypeAudio" style="margin-top: 10px; display: flex; align-items: center;">
<span style="">音频:</span>
<app-audio-recorder [audioUrl]="option.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, option, 'audio_url')">
</app-audio-recorder>
</div>
<div *ngIf="ques.optionTypePic" style="margin-top: 10px; display: flex; ">
<span style="">图片:</span>
<div style="width: 300px;">
<app-upload-image-with-preview [picUrl]="option.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, option, 'pic_url')">
</app-upload-image-with-preview>
</div>
<button *ngIf="option.pic_url" style="float: right;" nz-button nzType="" (click)="onDeletaImg(option, 'pic_url')">
x
</button>
</div>
</div>
</div> -->
<!-- <div style="margin-top: 30px">
<button nz-button nzType="dashed" (click)="addOneOption(ques)" style="width: 150px; height: 50px;">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加选项
</button>
</div> -->
</div>
</div>
<div
style=
"padding: 30px;"
>
<div
style=
"padding: 30px;"
>
...
@@ -315,11 +225,13 @@
...
@@ -315,11 +225,13 @@
<div
style=
"margin-bottom: 20px; text-align: center;"
>
<div
style=
"margin-bottom: 20px; text-align: center;"
>
<video
<video
id=
"fragment-video"
id=
"fragment-video"
[
src
]="
fragmentVideoUrl
"
[
src
]="
item
.
video_url
.
replace
('.
mp4
',
'
_h
.
mp4
')"
crossorigin=
"anonymous"
controls
controls
style=
"width: 100%; max-width: 800px;"
style=
"width: 100%; max-width: 800px;"
(
loadedmetadata
)="
onFragmentVideoLoadedMetadata
($
event
)"
(
loadedmetadata
)="
onFragmentVideoLoadedMetadata
($
event
)"
(
timeupdate
)="
onFragmentVideoTimeUpdate
($
event
)"
>
(
timeupdate
)="
onFragmentVideoTimeUpdate
($
event
)"
(
error
)="
onFragmentVideoError
($
event
)"
>
您的浏览器不支持视频播放
您的浏览器不支持视频播放
</video>
</video>
</div>
</div>
...
@@ -332,10 +244,11 @@
...
@@ -332,10 +244,11 @@
</div>
</div>
<!-- 视频帧缩略图轨道 -->
<!-- 视频帧缩略图轨道 -->
<div
*
ngIf=
"videoThumbnails.length > 0"
style=
"margin-bottom:
1
5px;"
>
<div
*
ngIf=
"videoThumbnails.length > 0"
style=
"margin-bottom:
4
5px;"
>
<div
style=
"display: flex; overflow-x: auto; padding: 10px 0; border: 1px solid #e8e8e8; border-radius: 4px; background-color: #fafafa;"
>
<div
#
thumbnailContainer
style=
"display: flex; overflow-x: auto; padding: 10px 0; border: 1px solid #e8e8e8; border-radius: 4px; background-color: #fafafa;"
>
<div
<div
*
ngFor=
"let thumbnail of videoThumbnails; let i = index"
*
ngFor=
"let thumbnail of videoThumbnails; let i = index"
[
id
]="'
thumbnail-
'
+
i
"
(
click
)="
onThumbnailClick
(
getThumbnailTime
(
i
))"
(
click
)="
onThumbnailClick
(
getThumbnailTime
(
i
))"
[
style
.
border
]="
isThumbnailActive
(
i
)
?
'
2px
solid
#
1890ff
'
:
'
2px
solid
transparent
'"
[
style
.
border
]="
isThumbnailActive
(
i
)
?
'
2px
solid
#
1890ff
'
:
'
2px
solid
transparent
'"
style=
"flex-shrink: 0; margin: 0 2px; cursor: pointer; border-radius: 2px; transition: border 0.2s;"
>
style=
"flex-shrink: 0; margin: 0 2px; cursor: pointer; border-radius: 2px; transition: border 0.2s;"
>
...
...
src/app/form/form.component.ts
View file @
8aa270b1
This diff is collapsed.
Click to expand it.
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