Vue 动态组件（<component :is>）结合唯一 key 强制重建，可正确切换音视频渲染；抽离媒体控制器组合式函数统一操作 API；video.js 与原生 audio 需隔离初始化并确保销毁。
用动态组件控制音视频渲染类型
在多媒体播放列表中，音频和视频需要不同的 DOM 结构与行为逻辑。直接复用同一标签（比如只用 <video>）会导致音频无法正确加载、controls 显示异常或事件监听失效。Vue 的 <component :is="..."> 是最自然的解法——它能按需挂载 AudioPlayer 或 VideoPlayer 组件，各自封装播放逻辑、样式和生命周期处理。
确保媒体源切换时内核重置
单纯切换 :is 值还不够。如果新组件复用旧实例（比如通过 v-if 频繁开关），可能残留上一个媒体的 src、播放状态或错误监听器。关键做法是：为每个动态组件绑定唯一 key，强制 Vue 卸载并重建实例。
- 用当前媒体项的
id或type+url拼接作为 key，例如:key="currentItem.id + '-' + currentItem.type" - 避免用索引（如
:key="index"）——列表排序或增删时会错乱 - 组件内部应在
mounted或onMounted中初始化媒体对象，beforeUnmount中调用pause()和load()清理资源
统一控制层适配不同内核
播放列表 UI（如播放/暂停按钮、进度条、音量滑块）不应感知底层是 audio 还是 video。建议抽离一个「媒体控制器」组合式函数（composable），提供标准化 API：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
-
play()：调用当前组件的play()方法，对 audio/video 均有效 -
pause()：同理，兼容两种元素 -
seek(time)：检查当前媒体是否支持duration，再设置currentTime -
mute()：audio 元素有muted属性，video 元素也支持，可统一操作
这样上层逻辑只与控制器交互，无需判断类型，切换时也不用重写控制逻辑。
立即学习“前端免费学习笔记（深入）”；
video.js 与原生 audio 的协同处理
若项目中 video.js 用于视频增强（字幕、自适应流等），但音频仍走原生 <audio>，要注意二者 API 差异：
- 不要把
video.js实例直接赋给 audio 元素——它不兼容 - 音频组件应独立初始化原生
Audio对象或使用ref操作<audio>标签 - 切换到音频时，确保 video.js 播放器已销毁（
player.dispose()），否则可能占用资源或触发冲突事件 - 可通过事件总线或
provide/inject向子组件透传播放器实例类型，让控制器自动选择调用路径
