HTML5标准发布后，原生支持了音频和视频的播放能力，开发者不需要再依赖Flash、Silverlight等第三方插件就能在网页中实现音视频播放功能。这一特性大幅简化了前端音视频相关的开发流程，也提升了网页的兼容性和安全性。
HTML5音视频原生支持的基础
HTML5新增了两个核心标签用于原生处理音视频内容，分别是<audio>和<video>。这两个标签属于HTML5的语义化标签，浏览器会自带对应的解码和播放能力，只要浏览器支持HTML5规范，就可以直接解析这两个标签实现播放，不需要额外安装任何插件。
目前主流的现代浏览器，包括Chrome、Firefox、Safari、Edge等都已经完整支持这两个标签，只有部分非常老旧的浏览器版本可能存在兼容性问题，但这类浏览器的市场份额已经极低，实际开发中基本不需要考虑。
audio标签的基础用法
<audio>标签用于处理音频内容，支持多种常见的音频格式，比如MP3、WAV、OGG等。基础的使用方式如下：
<!-- 基础音频播放示例 --> <audio controls> <source src="test.mp3" type="audio/mpeg"> <source src="test.ogg" type="audio/ogg"> 您的浏览器不支持HTML5 audio标签，无法播放音频 </audio>
上面的代码中，controls属性会让浏览器显示默认的播放控制栏，包含播放、暂停、音量调节等按钮。<source>标签用于指定不同格式的音频资源，浏览器会按照顺序尝试加载，直到找到支持的格式。如果所有格式都不支持，就会显示标签内部的兜底提示文本。
audio标签常用属性
- autoplay：页面加载完成后自动播放音频，部分浏览器出于用户体验考虑会限制自动播放，需要配合静音属性使用
- loop：音频播放结束后自动循环播放
- muted：默认静音播放音频
- preload：设置音频的预加载策略，可选值有none、metadata、auto
video标签的基础用法
<video>标签用于处理视频内容，支持的格式包括MP4、WebM、OGG等。基础使用方式和audio标签类似：
<!-- 基础视频播放示例 --> <video width="800" height="450" controls> <source src="test.mp4" type="video/mp4"> <source src="test.webm" type="video/webm"> 您的浏览器不支持HTML5 video标签，无法播放视频 </video>
这里设置了width和height属性来指定视频播放区域的尺寸，避免视频加载时页面布局发生偏移。controls属性同样会显示默认的播放控制栏，用户可以通过控制栏操作视频播放。
video标签常用属性
- poster：视频加载完成前或者播放前显示的封面图片地址
- autoplay：页面加载完成后自动播放视频，同样受浏览器自动播放策略限制
- loop：视频播放结束后自动循环播放
- muted：默认静音播放视频
为什么不需要插件实现
在HTML5出现之前，网页要实现音视频播放必须依赖Flash等第三方插件，这类插件存在很多弊端：首先是需要用户手动安装，安装过程繁琐，很多用户不会操作；其次是插件本身存在大量安全漏洞，容易被恶意利用；最后是插件兼容性差，不同浏览器对插件的支持程度不一样，开发维护成本高。
HTML5的原生音视频支持从根源上解决了这些问题：浏览器自带解码能力，不需要额外安装组件；原生能力由浏览器厂商维护，安全性和兼容性更有保障；开发时只需要写简单的标签代码就能实现功能，大幅降低了开发门槛。
兼容性注意事项
虽然现代浏览器都支持HTML5音视频，但不同浏览器支持的格式存在差异：比如MP4格式几乎所有浏览器都支持，而OGG、WebM格式的兼容性稍弱。实际开发中建议同时提供MP4和其他格式的备用资源，通过<source>标签适配不同浏览器。
如果需要兼容非常老旧的浏览器，可以在<audio>或<video>标签内部添加Flash播放器的兜底代码，不过这种情况现在几乎已经不需要考虑了。
简单示例：同时支持音视频的页面
下面是一个同时包含音频和视频播放的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5音视频播放示例</title>
</head>
<body>
<h3>音频播放</h3>
<audio controls autoplay muted>
<source src="background.mp3" type="audio/mpeg">
浏览器不支持audio标签
</audio>
<h3>视频播放</h3>
<video width="640" height="360" controls poster="cover.jpg">
<source src="demo.mp4" type="video/mp4">
<source src="demo.webm" type="video/webm">
浏览器不支持video标签
</video>
</body>
</html>
这个示例中音频设置了自动播放和静音，避免被浏览器拦截；视频设置了封面图，提升用户体验。整体代码非常简单，不需要任何插件相关的代码就能实现完整的播放功能。