HTML5视频播放器需用JavaScript动态管理多码率MP4源（如480p/720p/1080p），通过监听下拉框切换、暂停→更换src→load→恢复currentTime实现无感画质切换，并同步播放状态与用户偏好。
用 HTML5 `
准备多分辨率视频源
同一课程视频需提前转码为至少 3 档清晰度（如 480p、720p、1080p），每档生成独立 MP4 文件（推荐 H.264 编码），并确保时长、关键帧对齐、音频采样一致，避免切换时音画不同步。不建议混用格式（如 MP4 + WebM），教育场景以兼容性优先，统一用 MP4 即可。
- 命名建议带清晰度标识：`course-480.mp4`、`course-720.mp4`、`course-1080.mp4`
- 所有文件应部署在支持跨域（CORS）的 CDN 上，避免 `video.load()` 时因跨域被浏览器拦截
- 无需在 HTML 中预先写 `
`，这些源由 JS 按需加载，避免首屏冗余请求
HTML 结构与基础控制条
去掉 `controls` 属性，隐藏原生控件；用自定义 UI 提供清晰度下拉菜单和基础按钮：
<video id="edu-video" width="100%" poster="cover.jpg">
<p>加载中…</p>
</video>
<div class="custom-controls">
<button id="play-btn">▶</button>
<select id="quality-select">
<option value="720">高清（720p）</option>
<option value="480">标清（480p）</option>
</select>
</div>
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- `poster` 属性必须设置，提升首帧感知速度，尤其对移动端弱网用户友好
- 自定义控件用 CSS 定位覆盖在 video 上，注意 `pointer-events: none` 避免遮挡点击区域（可对 video 设置 `z-index`）
JavaScript 切换逻辑与状态保持
监听下拉框变化，执行三步操作：记录当前时间点 → 暂停播放 → 替换 src 并恢复播放位置：
const video = document.getElementById('edu-video');
const qualitySelect = document.getElementById('quality-select');
qualitySelect.addEventListener('change', async (e) => {
const quality = e.target.value;
const src = `/videos/course-${quality}.mp4`;
const currentTime = video.currentTime;
const wasPaused = video.paused;
// 先暂停，再加载新资源
video.pause();
video.src = src;
await video.load(); // 等待元数据加载完成
video.currentTime = currentTime;
// 恢复播放状态（若原本在播）
if (!wasPaused) {
video.play().catch(e => console.warn('自动播放被阻止:', e));
}
});
- 必须调用 `video.load()`，否则仅改 `src` 不触发重新加载
- `.play()` 返回 Promise，需 `.catch()` 处理静音/交互限制等拒绝情况，教育平台可加“点击继续播放”提示
- 切换前读取 `currentTime`，加载后立即赋值，能大幅降低卡顿感；但若新视频关键帧未对齐，可能跳到最近 I 帧，属正常行为
增强体验的小细节
教育场景强调学习连贯性，可在切换时增加轻量反馈：
- 切换中显示 loading 动画（如旋转图标），禁用下拉框选项，防止重复触发
- 保存用户上次选择的清晰度到 `localStorage`，下次进入自动应用
- 检测用户网络类型（`navigator.connection.effectiveType`），首次加载时默认选 480p（移动端 3G/4G 下更稳）
- 不提供“自动”档位——教育视频通常有字幕、PPT 同步等需求，固定清晰度比 ABR 更可控
