Commit 8aa270b1 authored by kingweight's avatar kingweight

视频帧轨道

parent da662a60
...@@ -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: 15px;"> <div *ngIf="videoThumbnails.length > 0" style="margin-bottom: 45px;">
<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;">
......
This diff is collapsed.
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