Flash停止官方支持后，网页中的音视频播放功能需要新的实现方案，html5的video和audio标签是最合适的替代选择，无需依赖任何第三方插件，主流浏览器都原生支持这两个标签，能直接实现音视频的加载和播放。
video标签替代Flash视频播放
video标签用于播放视频内容，支持多种视频格式，基本用法如下：
<video width="640" height="360" controls poster="cover.jpg"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <p>您的浏览器不支持video标签，请升级浏览器</p> </video>
常用属性说明：
- controls：显示播放控制栏，包含播放、暂停、音量调节等按钮
- autoplay：页面加载完成后自动播放视频，部分浏览器需要配合muted属性使用
- loop：视频播放结束后自动循环播放
- muted：默认静音播放
- poster：视频加载前显示的封面图片地址
- preload：设置视频预加载策略，可选值有none、metadata、auto
audio标签替代Flash音频播放
audio标签用于播放音频内容，用法和video标签类似，不需要设置宽高属性：
<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> <p>您的浏览器不支持audio标签，请升级浏览器</p> </audio>
audio标签的常用属性和video大部分一致，同样支持controls、autoplay、loop、muted等属性，也可以设置preload控制预加载行为。
格式兼容处理
不同浏览器支持的音视频格式不同，为了保证所有用户都能正常播放，需要准备多种格式的源文件：
| 格式 | 视频支持情况 | 音频支持情况 |
|---|---|---|
| MP4/MP3 | 大部分现代浏览器支持 | 所有主流浏览器支持 |
| WebM/Ogg | Chrome、Firefox等支持 | Chrome、Firefox等支持 |
可以在source标签中按顺序引入多种格式，浏览器会优先使用第一个支持的格式进行播放。
和Flash方案的对比
- 无需安装插件：html5方案原生支持，用户不需要额外安装Flash插件，避免了插件安全漏洞问题
- 移动端兼容更好：移动端浏览器基本都不支持Flash，video和audio标签在移动端可以正常运行
- 性能更优：原生标签播放音视频的性能比Flash插件更好，资源占用更低
- 开发更简单：不需要学习ActionScript等Flash相关技术，只需要掌握基础的html标签用法即可
简单播放控制示例
可以通过JavaScript控制video和audio的播放行为，示例如下：
// 获取video元素
const videoElement = document.querySelector('video');
// 播放视频
videoElement.play();
// 暂停视频
videoElement.pause();
// 跳转到10秒位置
videoElement.currentTime = 10;
// 设置音量为50%
videoElement.volume = 0.5;
audio标签的控制方法和video完全一致，只需要将获取的元素改为audio标签即可。