一、技术架构体系

1. 核心框架组成

• 主接口固定不可修改

• 备用JSON路径可自定义（后台配置）

• DPlayer 1.26..0+（集成HLS.js播放库）

• 弹幕协议：WebSocket实时通信

• 接口配置：

二、核心播放功能

1. 播放模式系统

• 裁剪全屏（保持原始比例）

• 缩放全屏（填充屏幕显示）

• 小窗播放模式（PiP API调用）

• 全屏适配方案：

• 健康观看提醒（30分钟强制暂停功能）

2. 剧集管理系统

• 智能选集功能（集数悬浮窗展示）

• 自动连播机制（片头片尾智能跳过）

• 播放记录同步（跨设备续播支持）

三、广告管理系统

1. 广告位配置

• 视频广告类型（需用户交互触发播放）

• 图片广告类型（PNG/JPG/WEBP格式支持）

• 首页顶部广告（跑马灯滚动展示）

2. 广告遮罩方案

• M3U8广告遮挡层（CSS定位覆盖技术）

• 动态透明度调节（0.3-1.0可配置）

• 点击穿透处理（不影响底层视频操作）

四、移动端优化系统

1. 触控交互方案

• 左滑调节亮度

• 右滑调节音量

• 双击暂停/播放

• 横屏锁定功能（重力感应自动旋转）

• 防误触机制（滑动解锁播放控件）

• 手势操作支持：

2. 全屏适配方案

• Viewport动态适配（rem单位响应布局）

• 虚拟按键隐藏（播放时自动全屏沉浸）

• 电量优化策略（后台播放自动降码率）

五、扩展功能模块

1. 媒体处理功能

• 视频截图下载（Canvas帧捕获技术）

• QQ分享接口（带缩略图及描述信息）

• 弹幕屏蔽系统（关键词/用户ID过滤）

2. CMS对接方案

• 数据获取接口（JSONP跨域解决方案）

• 播放器皮肤同步（CMS主题色动态继承）

• 数据统计回传（播放量/完播率日志）

六、已知问题说明

1. 兼容性问题

• iOS系统小窗播放限制（需Safari 14+）

• 部分CMS跨域截图限制（需配置CORS）

• 旧版IE浏览器不兼容（仅支持Chrome/Firefox）

2. 待优化功能

• 定时关闭自定义（需重构计时器模块）

• 分享功能深度对接（待第三方API开发）

• 选集UI界面重构（计划采用Vue组件化）

七、部署配置指南

1. 环境要求

• 支持HTTPS协议（截图功能必需）

• 开启WebSocket服务（弹幕实时交互）

• 现代浏览器：Chrome 80+/Safari 13+

• 服务器配置：

2. 广告配置路径

• 视频广告：/assets/ads/video.mp4

• 图片广告：/config/ads.json

• 跑马灯文案：/config/marquee.txt