HTML 插入音频或视频

旧式写法

<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" 
width="100" height="50">
    <param name="BorderStyle" value="1" />
    <param name="MousePointer" value="0" />
    <param name="Min" value="0" />
    <param name="Enabled" value="1" />
    <param name="Max" value="10" />
</object>Code language: HTML, XML (xml)

代码解析

• 这是早期通过 <object> + classid 调用 Windows ActiveX 控件​ 的写法（主要用于老 IE 浏览器）
• classid：控件的唯一标识（类似身份证号），这里调用的是一个滑块控件（Slider）
• <param>：给控件传参数（边框样式、最小值、最大值等）
• 注意：这段代码其实是个滑块控件，不是完整的音频播放器。真正的老式音频播放通常还会带 url 参数指向 mp3/wma 文件
• 已淘汰：现代浏览器（Chrome/Firefox/Edge）不支持 ActiveX，HTML5 已废弃此方式

现代标准写法（HTML5）

HTML5 引入了原生的 <audio> 和 <video> 标签，无需插件，所有现代浏览器都支持

插入音频（<audio>）

<audio src="music.mp3" controls></audio>Code language: HTML, XML (xml)

常用属性：

属性	作用
controls	显示播放/暂停/音量控件
autoplay	自动播放（现代浏览器常需配合 muted）
loop	循环播放
muted	静音
preload	预加载策略（none / metadata / auto）

多格式兼容写法（推荐）：

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    你的浏览器不支持 audio 标签
</audio>Code language: HTML, XML (xml)

支持格式：MP3（最推荐）、WAV、OGG（笔记提到的 WMA 现代浏览器支持较差，建议转 MP3）

插入视频（<video>）

<video src="video.mp4" width="640" height="360" controls poster="cover.jpg"></video>Code language: HTML, XML (xml)

常用属性（比 audio 多几个）：

属性	作用
poster	视频播放前显示的封面图
width / height	播放器尺寸
playsinline	移动端内联播放（不全屏）

多格式兼容：

<video controls width="640">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    你的浏览器不支持 video 标签
</video>Code language: HTML, XML (xml)

视频推荐格式：MP4（H.264）​ 兼容性最好

新旧技术对比

对比项	旧式（<object> + ActiveX）	现代（HTML5 <audio> / <video>）
插件依赖	需安装 Windows Media Player / Flash	浏览器原生，无需插件
浏览器支持	仅老 IE	所有现代浏览器
格式支持	wma、mp3（依赖本地播放器）	mp3、mp4、ogg、webm（标准统一）
跨平台	x（Windows 限定）	√（手机/电脑通用）
代码复杂度	复杂（classid、param）	极简（一行标签）