应使用 和 标签而非 嵌入本地音视频，因现代浏览器已弃用 object 对原生媒体的支持；需通过本地服务运行、确保 h.264/aac 编码、正确设置 autoplay muted 等条件。
object 标签嵌入本地音视频基本不可靠
直接用 <object></object> 加本地 .mp4 或 .mp3 文件，在现代浏览器中大概率失败。不是写法不对，而是浏览器已逐步弃用 object 加载原生音视频的能力——它现在主要用于 PDF、Flash（已淘汰）、旧 Java Applet 等插件类内容，对 HTML5 媒体格式缺乏统一支持策略。
为什么 src + data 属性常失效
常见错误是这样写：
<object data="video.mp4" type="video/mp4" width="600" height="400"> 您的浏览器不支持该对象。 </object>
问题出在几个层面：
- Chrome、Edge、Firefox 默认不为
object启用内置音视频解码器，即使 MIME 类型正确，也可能静默失败 -
data属性值若为相对路径，容易因 base URL 或服务上下文（如直接双击打开file://）被拦截，报Not allowed to load local resource - 没有等效于
controls的标准属性，依赖插件或 fallback 内容，体验不可控 - 移动端 Safari 完全忽略
object中的音视频data，直接显示 fallback 文本
真要兼容老环境，得配合 embed 和 MIME 显式声明
如果目标必须是 IE11 或极老内核（如某些政务/工控系统），可尝试组合写法，但需满足全部条件：
- 服务器必须返回正确的 MIME 类型：
video/mp4对应 MP4，audio/mpeg对应 MP3；不能靠文件扩展名猜测 - 必须同时提供
<object></object>和内嵌<embed></embed>，后者作为 fallback 渲染层 -
type属性不可省略，且值要与服务器响应头严格一致 - 避免使用
autoplay、loop等行为控制，这些在object/embed中无标准化支持
最小可行示例：
<object data="audio.mp3" type="audio/mpeg" width="300" height="30"> @@@###@@@ <p>您的浏览器不支持音频播放</p> </object>
真正该用什么？video 和 audio 标签才是正解
2026 年所有主流浏览器（包括 Edge 110+、Safari 17+、Chrome 120+）对 <video></video> 和 <audio></audio> 的支持已趋完善。关键点不是“能不能用”，而是“怎么用对”：
- 本地开发务必起服务：用
npx serve或 VS Code Live Server，避免file://协议下 CORS 和 MIME 限制 - MP4 必须是 H.264 + AAC 编码，否则即使后缀是 .mp4 也会黑屏
- 需要自动播放？
autoplay和muted必须同时存在，缺一不可 - 想让控件显示？确保元素有非零宽高，且没被 CSS 设为
display: none或visibility: hidden
一句话收尾：把 object 当作兜底方案只在极少数遗留系统里碰运气，日常开发中坚持用 <video></video> 和 <audio></audio>，并认真检查编码格式和服务部署方式——这才是最省时间的路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
