使用 avPlayer 和 xComponent 进行视频播放
介绍：该组件主要是封装 avPlayer 播放视频的工具类，结合 xComponent 组件，实现对视频的播放。
1. 组件原理
核心功能：基于
avPlayer和xComponent实现视频播放，集成横竖屏切换、AI 字幕、导航控制等功能。窗口管理：通过
WindowUtil控制屏幕方向、系统栏显隐，实现沉浸式横屏播放。状态驱动：利用
@State管理播放状态（横竖屏、退出标志），@StorageProp存储安全区高度适配不同设备。模块化设计：将视频播放器（
LVideoComponent）、AI 字幕（AICaptionComponent）封装为独立组件，通过属性注入交互逻辑。
2. 实现逻辑
导航传参：通过
NavPathStack获取上级页面传递的VideoModel数据（视频 URL、标题等）。生命周期：
aboutToAppear初始化视频数据，准备播放资源。横屏模式：隐藏系统栏、锁定屏幕方向为
LANDSCAPE，进入沉浸式播放。竖屏模式：恢复系统栏、方向为
PORTRAIT，显示顶部安全区。视频播放控制：LVideoComponent：核心播放器组件，接收
url播放视频，通过isScreenRow控制 UI 适配横竖屏。事件回调：
leftIconClick处理返回/退出全屏，fullScreenIconClick切换横竖屏。AI 字幕集成：
状态控制：isShowAICaptionComponent 控制字幕组件显隐。
控制器：AICaptionController 管理字幕加载逻辑，通过 onPrepared 和 onError 回调处理状态。
自定义返回逻辑：横屏时拦截返回键仅退出全屏，竖屏时正常返回上一页。
路由管理：通过
exitPage状态触发页面退出。
3. 实际应用场景
视频播放器：用于 App 内视频详情页播放，支持横竖屏切换。
全屏沉浸体验：适配影视类 App 的长视频播放场景。
多语言支持：结合 AI 字幕实现实时翻译，适合教育、国际内容平台。
4. 优势
沉浸式体验：
横屏自动隐藏系统栏，最大化视频显示区域。
平滑的横竖屏切换动画（依赖系统实现）。
模块解耦：
播放器（
LVideoComponent）与字幕组件（AICaptionComponent）独立维护，通过接口交互。导航逻辑与播放逻辑分离，便于扩展。
兼容性：
通过
WindowUtil封装系统 API，统一处理不同设备的窗口操作。安全区高度动态适配，避免刘海屏/挖孔屏遮挡。
5. 视觉效果
自适应布局：
横屏时顶部安全区高度为 0，视频区域全屏。
竖屏时显示标题、控制栏，保留操作入口。
UI 反馈：
全屏按钮图标随状态切换（需在
LVideoComponent实现）。标题过长时显示省略号（
TextOverflow.Ellipsis）。
6. 可定制性
扩展播放控件：通过在
LVideoComponent中添加进度条、音量控制等 UI 元素。字幕样式：修改
AICaptionComponent的字体、颜色、位置参数。主题适配：动态切换背景色（当前固定为
#ffeaeaea）。
7. 性能与适配
性能优化：
avPlayer硬解码提升视频流畅度，降低 CPU 占用。横竖屏切换时避免视频重新加载，保持播放连续性。
内存管理：
页面退出时释放
avPlayer资源（需在aboutToDisappear实现）。AI 字幕加载使用懒加载或分片加载策略。
适配建议：
测试不同分辨率视频的缩放模式（如
cover、contain）。处理屏幕旋转时的 UI 重绘卡顿（使用异步布局更新）。
8. 代码实现
9.页面级部分代码
还未添加个人签名 2025-05-06 加入
还未添加个人简介
评论