xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 9 Pull Requests 3 Actions 6 Packages Projects Releases 7 Wiki Activity

fix: 多video元素无缝切换+标题字号上限调大 #1433

Closed
xiaoxia wants to merge 1 commits from fix/preview-player-v7 into develop
pull from: fix/preview-player-v7
merge into: xiaoxia:develop
Conversation 2 Commits 1 Files Changed 3
+104 -188
xiaoxia commented 2026-08-18 23:27:58 +08:00
Owner
Copy Link
Copy Source

修复内容

1. 视频播放不流畅 → 多 video 元素方案

  • 问题: 每次切换片段都要重新 video.src = url + load()，即使有预加载也有延迟
  • 修复: 为每个片段创建独立 <video> 元素，设置 preload="auto" 全部预加载，用 display: none/block 切换当前播放的视频，切换时直接显示预加载好的 video，不需要重新 load
  • 改动文件: useSegmentScheduler.ts + FrontendPreviewPlayer.tsx

2. 标题字号上限太小

  • 问题: Math.min(settings.size, 36) 把字号限制在最大 36px，太小了
  • 修复: 上限调大到 96，跟滑块最大值对齐
  • 改动文件: PreviewVideoPanel.tsx

技术细节

  • useSegmentScheduler 重写：videoRef 单元素 → videoRefs 数组管理多 video
  • switchToSegment 不再设置 video.src，仅 seek + 等待 canplay
  • 移除了旧的 preloadVideoRef 隐藏预加载逻辑（不再需要）
  • tick 函数简化：直接读取当前 video 的 currentTime
  • 代码量减少：从 ~340 行减少到 ~250 行
## 修复内容 ### 1. 视频播放不流畅 → 多 video 元素方案 - **问题**: 每次切换片段都要重新 `video.src = url` + `load()`，即使有预加载也有延迟 - **修复**: 为每个片段创建独立 `<video>` 元素，设置 `preload="auto"` 全部预加载，用 `display: none/block` 切换当前播放的视频，切换时直接显示预加载好的 video，不需要重新 load - **改动文件**: `useSegmentScheduler.ts` + `FrontendPreviewPlayer.tsx` ### 2. 标题字号上限太小 - **问题**: `Math.min(settings.size, 36)` 把字号限制在最大 36px，太小了 - **修复**: 上限调大到 96，跟滑块最大值对齐 - **改动文件**: `PreviewVideoPanel.tsx` ### 技术细节 - `useSegmentScheduler` 重写：`videoRef` 单元素 → `videoRefs` 数组管理多 video - `switchToSegment` 不再设置 `video.src`，仅 seek + 等待 canplay - 移除了旧的 preloadVideoRef 隐藏预加载逻辑（不再需要） - tick 函数简化：直接读取当前 video 的 currentTime - 代码量减少：从 ~340 行减少到 ~250 行
xiaoxia added 1 commit 2026-08-18 23:27:58 +08:00
fix: 多video元素无缝切换+标题字号上限调大
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 36s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 55s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m35s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 1m15s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m53s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m55s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m13s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m25s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m19s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 6m33s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Failing after 6s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m50s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m1s
Details
e78c812bfd 
1. 片段切换改为多video元素方案：每个片段独立<video>元素+preload='auto'全预加载
   用display:none/block切换，不再重新设置src+load，消除切换延迟
2. 标题fontSize上限从36调到96，与滑块最大值对齐，用户可设置更大字号
3. useSegmentScheduler重写：videoRefs数组管理多video，switchToSegment仅seek不切src
gitea-actions bot commented 2026-08-18 23:30:11 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

项目 详情
PR号 #1433
预览链接 https://pr-1433.preview.xiaoxiajianji.com
API环境 staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1433 | | 预览链接 | [https://pr-1433.preview.xiaoxiajianji.com](https://pr-1433.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
xiaoxia closed this pull request 2026-08-19 20:48:09 +08:00
gitea-actions bot commented 2026-08-19 20:49:22 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

PR #1433 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #1433 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Some checks are pending
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 36s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 55s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m35s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 1m15s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m53s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m55s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m13s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m25s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m19s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 6m33s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Failing after 6s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m50s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m1s
Details

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
P0
阻塞性，必须立即处理
 P1
高优先级
 P2
中优先级
 P3
低优先级/后考虑
 architecture
架构设计
 backend
后端相关
 blocked
阻塞中
 bug
Bug修复
 ci-bug
CI本身的bug
 ci-optimization
CI优化类任务
 ci-pipeline
CI流水线/workflow相关
 cleanup
代码清理
 devops
运维/部署/CI
 documentation
文档相关
 feature
新功能
 frontend
前端相关
 question
需要讨论确认
 ready
PR CI通过，可合并
 refactor
代码重构
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot xiaoxia
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1433
Delete Branch "fix/preview-player-v7"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?