HTML5媒体API虽无内置淡入淡出功能，但可通过volume控制音量渐变、currentTime与preload实现视频平滑切换、CSS opacity过渡实现视觉淡入淡出，并依赖ended/timeupdate等事件精准协调时机。
HTML5 媒体 API 本身不直接提供“淡入淡出”或“平滑过渡”的内置方法，但可以通过结合 volume 属性、currentTime 控制、事件监听（如 ended、timeupdate）以及 CSS 过渡（针对 <video> 的 opacity）来手动实现这些效果。关键在于对播放状态和媒体属性的精细控制。
用 volume 实现音频淡入淡出
音量渐变是最常用且兼容性好的方式。通过定时器或 requestAnimationFrame 在播放开始前逐步增大音量（淡入），或在结束前逐步减小至 0（淡出），避免突兀的启停。
- 淡入示例：将
audio.volume = 0，调用play()后启动递增循环，每 50ms 增加 0.05，直到达 1.0 - 淡出示例：监听
timeupdate或在手动切换前启动递减逻辑，确保在volume降到 0 后再调用pause()或切换源 - 注意：部分移动浏览器限制自动播放时的音量操作，需用户手势触发后才可生效
用 currentTime 和 preload 实现视频片段平滑切换
多个视频间的无缝过渡依赖于预加载与精确时间点控制。先加载下一段视频的起始帧（设置 preload="metadata" 或 "auto"），再在当前视频结束前几帧开始调整 currentTime 并叠加播放。
- 使用
canplay事件确认下一段已就绪，再执行currentTime = 0并调用play() - 若需交叉淡化，可同时播放两个
<video>元素，一个逐渐降低 opacity，另一个逐渐升高，配合 volume 调整增强连贯感 - 避免直接修改
src后立即play()，容易触发加载延迟或黑屏；推荐复用<video>元素 +load()方法重载
用 CSS opacity + transition 实现视觉淡入淡出
对 <video> 或 <audio> 的容器应用 CSS 不透明度动画，是轻量级视觉过渡方案。它不改变媒体播放行为，仅影响显示效果，适合片头片尾或场景切换。
立即学习“前端免费学习笔记（深入）”；
- 给视频外层
<div>设置transition: opacity 0.5s ease - 播放开始前设
opacity: 0，触发播放后设为1；暂停或结束前设回0 - 注意：opacity 动画不影响音频输出，需单独控制 volume 避免“有声无画”或“有画无声”的错位
监听关键事件，协调过渡时机
准确响应播放生命周期事件，是实现同步过渡的基础。仅靠定时器易受网络、解码性能影响，应优先依托原生事件驱动逻辑。
-
loadedmetadata：确认时长、尺寸可用，适合初始化时间轴或预设淡出起点 -
playing：表示真正开始渲染，此时启动淡入更可靠 -
ended：触发淡出及下一媒体加载，但需结合pause()防止自动跳转 -
stalled或waiting：提示缓冲不足，可暂停过渡动画，避免卡顿造成体验断裂
不复杂但容易忽略的是各浏览器对 autoplay、volume 设置和事件触发顺序的差异。建议在真实设备上测试，并为关键路径提供降级逻辑——比如检测到不支持 volume 变化时，改用 mute/unmute 切换加 CSS 过渡组合方案。
