Commit a4dcd6d6 authored by kingweight's avatar kingweight

视频预览

parent 420c6999
......@@ -236,6 +236,10 @@
</video>
</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="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
......@@ -278,7 +282,7 @@
(ngModelChange)="onFragmentTrackChange($event)"
(nzOnBeforeChange)="onFragmentTrackStart()"
(nzOnAfterChange)="onFragmentTrackEnd()"
[nzTooltipVisible]="'always'">
[nzTooltipVisible]="isFragmentModalVisible ? 'always' : 'never'">
</nz-slider>
</div>
......
......@@ -55,6 +55,8 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
thumbnailCount = 20; // 生成的缩略图数量
thumbnailCache: Map<string, { thumbnails: string[], duration: number, count: number }> = new Map(); // 缩略图缓存
@ViewChild('thumbnailContainer', { static: false }) thumbnailContainer: ElementRef; // 缩略图容器引用
isPreviewing = false; // 是否正在预览播放
previewTargetTime = 0; // 预览目标时间
......@@ -227,6 +229,12 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
// 视频片段弹窗 - 取消
fragmentModalCancel() {
// 如果正在预览,停止播放
if (this.isPreviewing && this.fragmentVideoElement) {
this.fragmentVideoElement.pause();
this.isPreviewing = false;
}
this.isFragmentModalVisible = false;
this.currentFragmentQues = null;
this.currentFragmentIndex = -1;
......@@ -237,6 +245,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this.isDraggingTrack = false;
this.videoThumbnails = []; // 只清除当前显示的缩略图,保留缓存
this.isGeneratingThumbnails = false;
this.previewTargetTime = 0;
}
// 清除指定视频的缩略图缓存
......@@ -438,8 +447,18 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
// 视频时间更新
onFragmentVideoTimeUpdate(event) {
if (!this.isDraggingTrack) {
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) {
this.fragmentVideoCurrentTime = video.currentTime;
const previousSelectedIndex = Math.floor(this.fragmentSelectedTime);
this.fragmentSelectedTime = video.currentTime;
......@@ -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() {
this.isDraggingTrack = true;
......
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