在html5标准推出后，原生支持音视频播放能力，不需要再依赖Flash等第三方插件，通过内置的audio和video标签就可以快速创建多媒体元素，同时还能实现本地文件的音视频预览功能。
一、html5多媒体元素的基础创建
1. audio音频元素创建
audio标签用于嵌入音频内容，基础语法如下，支持多种音频格式，常用格式包括mp3、ogg、wav：
<audio controls> <source src="audio_demo.mp3" type="audio/mpeg"> <source src="audio_demo.ogg" type="audio/ogg"> 您的浏览器不支持audio标签 </audio>
上面的代码中，controls属性会显示默认的播放控制栏，包含播放、暂停、音量调节等按钮。如果浏览器不支持audio标签，会显示标签内部的提示文本。source标签用于指定不同格式的音频资源，浏览器会按顺序选择第一个支持的资源进行播放。
2. video视频元素创建
video标签用于嵌入视频内容，基础语法和audio类似，常用视频格式包括mp4、ogg、webm：
<video width="640" height="360" controls> <source src="video_demo.mp4" type="video/mp4"> <source src="video_demo.ogg" type="video/ogg"> 您的浏览器不支持video标签 </video>
video标签可以通过width和height属性设置视频容器的尺寸，同样添加controls属性显示控制栏。如果需要视频自动播放，可以添加autoplay属性，不过多数浏览器为了用户体验，会限制自动播放有声视频，通常需要配合muted属性实现静音自动播放。
二、常用核心属性说明
audio和video标签有很多通用属性，可以根据需求灵活配置，常用属性整理如下：
| 属性名 | 含义 | 取值说明 |
|---|---|---|
| controls | 显示默认控制栏 | 布尔属性，添加即生效 |
| autoplay | 页面加载后自动播放 | 布尔属性，多数浏览器需配合muted使用 |
| loop | 播放结束后循环播放 | 布尔属性，添加即生效 |
| muted | 默认静音 | 布尔属性，添加即生效 |
| preload | 预加载策略 | 可选值：none（不预加载）、metadata（只加载元数据）、auto（自动预加载） |
| poster | 视频封面图（仅video支持） | 图片的URL地址 |
三、实现本地音视频文件预览
实际开发中经常需要实现用户选择本地音视频文件后直接预览的功能，不需要先上传到服务器，可以通过FileReader API配合多媒体元素实现，完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>本地音视频预览</title>
</head>
<body>
<h3>选择本地音视频文件预览</h3>
<input type="file" id="fileInput" accept="audio/*,video/*">
<div id="previewContainer"></div>
<script>
const fileInput = document.getElementById('fileInput');
const previewContainer = document.getElementById('previewContainer');
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
// 校验文件类型
if (!file.type.startsWith('audio/') && !file.type.startsWith('video/')) {
alert('请选择音视频文件');
return;
}
const reader = new FileReader();
reader.onload = function(event) {
const fileUrl = event.target.result;
previewContainer.innerHTML = '';
if (file.type.startsWith('audio/')) {
// 创建音频元素
const audio = document.createElement('audio');
audio.controls = true;
audio.src = fileUrl;
previewContainer.appendChild(audio);
} else if (file.type.startsWith('video/')) {
// 创建视频元素
const video = document.createElement('video');
video.controls = true;
video.width = 640;
video.height = 360;
video.src = fileUrl;
previewContainer.appendChild(video);
}
};
// 以DataURL形式读取文件
reader.readAsDataURL(file);
});
</script>
</body>
</html>
上面的代码逻辑是：首先通过input标签的accept属性限制只能选择音视频文件，当用户选择文件后，通过FileReader的readAsDataURL方法把文件转换为base64格式的URL，然后根据文件类型动态创建audio或者video元素，把生成的URL赋值给元素的src属性，就可以实现本地文件的即时预览。
四、注意事项
- 不同浏览器对音视频格式的支持不同，建议同时提供多种格式的资源，提升兼容性。
- 本地预览功能依赖FileReader API，不支持IE10及以下版本的浏览器。
- 如果音视频资源跨域，需要服务端配置对应的CORS头，否则可能出现无法播放的问题。
- 自动播放属性在移动端浏览器的限制更严格，通常需要进行用户交互后才能触发播放。